HTML Table Styling
We believe that by reviewing HTML table styling using examples in this article, the learning objectives will be satisfied.
Importance
Styling tables in HTML is important for several reasons:
- Tables that are styled well can be visually appealing and can enhance the overall look and feel of a website. This can improve the user experience and make the website more engaging.
- By applying appropriate styling to tables, you can improve the readability of the content. This can help users to better understand the information being presented in the table.
- By using appropriate styling, you can also make tables more accessible to users with disabilities, such as those using screen readers. For example, by using appropriate color contrast, you can make sure that the table content is legible to all users.
- By styling tables to match your website’s branding and design, you can create a consistent look and feel throughout the website. This can help to reinforce your brand identity and make your website more memorable.
- By using styling to differentiate between different types of data within a table, you can make the table more functional and easier to use. For example, by using different background colors to highlight different rows or columns, you can help users to quickly identify important information.
For example the following table is designed using CSS, which make it quite attractive and appealing to the users:
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mr Example Table</title>
<link rel="stylesheet" href="css/style.css">
<style>
html,
body {
height: 100%;
}
body {
margin: 0;
background: -webkit-linear-gradient(45deg, #49a09d, #5f2c82);
background: linear-gradient(45deg, #49a09d, #5f2c82);
font-family: sans-serif;
font-weight: 100;
}
.container {
position: absolute;
top: 15%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: rgba(84, 18, 18, 0.708);
}
table {
width: 600px;
border-collapse: collapse;
overflow: hidden;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
th,
td {
padding: 15px;
background-color: rgba(255, 255, 255, 0.2);
color: #fff;
}
th {
text-align: left;
}
thead th {
background-color: #55608f;
}
tbody tr:hover {
background-color: rgba(255, 255, 255, 0.3);
}
tbody td {
position: relative;
}
tbody td:hover:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: -9999px;
bottom: -9999px;
background-color: rgba(255, 255, 255, 0.2);
z-index: -1;
}
.w{
text-align: center;
font-size:80px
}
</style>
</head>
<body>
<div class="container">
<h1 class="w">Mr. Examples</h1>
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Table Of Content-
HTML Table Styling – Vertical Zebra Stripes
You should style each other column in place of each row, so that you get vertical zebra stripes.
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 |
Assign the :nth-child(even) attribute to table data elements as follows:
Example:
<!DOCTYPE html>
<html>
<head>
<style>
td:nth-child(even),
th:nth-child(even) {
background-color: #7d3535;
}
</style>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Row 1 Column 1</td>
<td>Row 1 Column 2</td>
<td>Row 1 Column 3</td>
</tr>
<tr>
<td>Row 2 Column 1</td>
<td>Row 2 Column 2</td>
<td>Row 2 Column 3</td>
</tr>
</table>
</body>
</html>
IMPORTANT: You can style both headers and regular table cells by applying the :nth-child() selector to both <th> and <td> tags.
Zebra Stripes Vertically and Horizontally
You can combine the CSS from the two examples above in order to have stripes in every column and row of an HTML table.
Overlapping will occur if you use a transparent color.
Transparency can be determined using rgba() colors:
Example:
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
tr:nth-child(even) {
background-color: rgba(225, 159, 159, 0.6);
}
th:nth-child(even), td:nth-child(even) {
background-color: rgba(220, 133, 141, 0.7);
}
</style>
</head>
<body>
<table>
<tr>
<th>Technology </th>
<th> Description </th>
</tr>
<tr>
<td> Artificial Intelligence </td>
<td> The field of computer science that focuses on creating machines that can think and work like humans. </td>
</tr>
<tr>
<td> Blockchain </td>
<td> A digital ledger of transactions that is securely stored across a network of computers. </td>
</tr>
<tr>
<td> Cloud Computing </td>
<td> The delivery of computing services, including servers, storage, databases, networking, software, analytics, and intelligence, over the Internet to offer faster innovation, flexible resources, and economies of scale. </td>
</tr>
</table>
</body>
</html>
HTML Table Styling – Zebra Stripes
HTML tables can be styled with a zebra stripes effect by assigning a background color to all rows.
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 |
In order to style each subsequent row of the table element, use the :nth-child(even) selector as follows:
Example:
<!DOCTYPE html>
<html>
<head>
<style>
tr:nth-child(even) {
background-color: #8e3b3b;
}
</style>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Row 1 Column 1</td>
<td>Row 1 Column 2</td>
<td>Row 1 Column 3</td>
</tr>
<tr>
<td>Row 2 Column 1</td>
<td>Row 2 Column 2</td>
<td>Row 2 Column 3</td>
</tr>
</table>
</body>
</html>
IMPORTANT: The styling will appear in rows 1,3,5 etc. In place of 2,4,6 etc. When you choose (odd) instead of (even).
Hoverable Table
In order to highlight table rows on mouse hover, apply the :hover selector on tr:
First Name Last Name SavingsDavid Willey $69Sam Curran $230Curran thomas $480
<!DOCTYPE html>
<html><body><p>Example:Execute</p>
<style>
tr:hover {
background-color: #421b1b;
}
</style><table>
<tr>
<th>Technology </th>
<th> Description </th>
</tr>
<tr>
<td> Artificial Intelligence </td>
<td> The field of computer science that focuses on creating machines that can think and work like humans. </td>
</tr>
<tr>
<td> Blockchain </td>
<td> A digital ledger of transactions that is securely stored across a network of computers. </td>
</tr>
<tr>
<td> Cloud Computing </td>
<td> The delivery of computing services, including servers, storage, databases, networking, software, analytics, and intelligence, over the Internet to offer faster innovation, flexible resources, and economies of scale. </td>
</tr>
</table></body></html>
Html Table Styling Importance
Styling HTML tables is important for several reasons:
- By applying appropriate styling to tables, you can make them more visually appealing and engaging. This can improve the overall look and feel of your website, and make it more attractive to users.
- Tables that are well-styled can be easier to read and understand. By using appropriate colors, fonts, and other design elements, you can improve the readability of the table data and make it more accessible to users.
- By styling tables to match your website’s branding and design, you can create a consistent look and feel throughout the site. This can help to reinforce your brand identity and make your website more memorable.
- Styling tables can also enhance their functionality and make them more user-friendly. By using different colors or shading to differentiate between rows or columns, for example, you can make it easier for users to quickly identify important information.
- By using appropriate styling techniques, you can also make tables more accessible to users with disabilities, such as those using screen readers. For example, by using appropriate color contrast and font sizes, you can ensure that the table content is legible to all users.
Do subscribe to our Newsletter below in order to be in touch with the latest technical information on this site.
We value your feedback.
+1
+1
+1
+1
+1
+1
+1
