CSS tables
Styling Lists and TablesIn this lesson, we will learn how to style HTML table using different types of CSS properties.
Customize Table using CSS Properties
HTML tables are a versatile tool for organizing and presenting data on the web. To make your tables visually appealing and responsive, CSS offers a range of properties that allow you to customize their appearance.
Here is the list of some commonly used CSS properties that can be applied on a table.
- border
- width and height
- margin
- padding
- text-align
- color and background-color
Table Border
The border property allows you to add borders to your table and its elements (headers, rows, and cells).
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS table border Example</title>
<!-- Internal CSS -->
<style>
table {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
</table>
</body>
</html>The border-collapse: collapse property will merge the borders of the table, th and td into a single border. This property is applied only on HTML table element.
Table Width and Height
You can control the width and height of your table using the width and height properties.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS table width and height Example</title>
<!-- Internal CSS -->
<style>
table {
border: 1px solid black;
border-collapse: collapse;
width: 500px;
height: 150px;
}
th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
</table>
</body>
</html>Table Alignment
Use the margin property to align your table within its container.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS table alignment Example</title>
<!-- Internal CSS -->
<style>
table {
border: 1px solid black;
border-collapse: collapse;
margin: 0 auto;
}
th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
</table>
</body>
</html>Table Padding
You can use the padding property to adjust the spacing between cell border and content.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS table padding Example</title>
<!-- Internal CSS -->
<style>
table {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 10px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
</table>
</body>
</html>Table Text Alignment
You can use the text-align property to control the alignment of text within table cells.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS table text alignment Example</title>
<!-- Internal CSS -->
<style>
table {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
</table>
</body>
</html>Table Text Color and Background
You can customize the background and text color of your table and its elements using the color and background-color properties.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS table text color and background color Example</title>
<!-- Internal CSS -->
<style>
table {
border: 1px solid blue;
border-collapse: collapse;
}
th, td {
border: 1px solid blue;
padding: 8px;
text-align: center;
}
th {
color: white;
background-color: black;
}
td {
color: red;
background-color: yellow;
}
</style>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
</table>
</body>
</html>