HTML Table Style

Updated on 28/01/2025543 Views

Table of Content

Most modern web pages online today are aesthetic and pay close attention to how each element can look better and provide a more interactive experience. If you use the default elements provided by HTML, it hinders the experience of the user. This is where styling of HTML elements comes in. Just like other elements, we use CSS and HTML attributes to alter the HTML table style for the table element in HTML.

I use HTML CSS table style all the time to make tables in my web pages look exactly how I want all the time. This makes my tables stand out in the crowd garnering more attention on my web page. In this tutorial, I will show you how you can change HTML table design with CSS to make tables on your web pages more attractive.

HTML Table Style Basics

Before going into how to change the HTML table style, let me talk about the basics of the HTML table element.

HTML tables are used to organize and showcase data in the form of rows and columns. Firstly, let me discuss the basic components of an HTML table.

<table>: is the container for the entire table.
<tr>: defines a row in the table.
<th>: refers to a header cell often in the first row or column.
<td>: defines a data cell with actual data.

Now that I have discussed the basic components of the HTML table, let me discuss the basic attributes used by this HTML element.

border: Sets the thickness of the table border (border="1" for a basic border).
cellpadding: The space between cell content and cell borders (cellpadding="5" adds 5 pixels of padding).
cellspacing: The space between cells (cellspacing="0" implies no space between cells).
width, height: Indicates the width and height of the table (width="100%" makes the table fill the entire width).
rowspan: Determines how many rows a cell should span.
colspan: Determines how many columns a cell should span.

After utilizing these attributes and basics of the HTML table to make a basic skeleton of the table we want, we go ahead to style it using CSS into the best HTML table design we see fit.

Now let me start with the CSS attributes used commonly when designing HTML table style. Here is a list of attributes in CSS.

border-collapse: Determines whether table borders should be compacted into a single border or divided.
border-spacing: Sets the distance between cells when border-collapse is set to separate.
width and height: Set the width and height of the table.
padding: adds space between table cell internal content and borders.
text-align: to align text within table cells horizontally, use text-align (left, center, right).
vertical-align: aligns content in table cells vertically (top, middle, and bottom).
background-color: Sets the background color for the table, rows, or cells.
color: Determines the text color of table content.
font-family and font-size: Indicates the font family and size for table text.
border: Determines the style, width, and color of the table's borders, including rows and cells.
border-radius: Rounds the corners of table borders.
box-shadow: The box-shadow option adds a shadow effect to the table, rows, or cells.

Table Border

We can add borders to our HTML table using the attribute border in HTML. However, it is not recommended anymore as this attribute was deprecated in HTML5. Now we use CSS to change the HTML table border style. First, let me show you how to add a border using the border attribute in HTML with a simple table border style.

HTML table border example

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> HTML Table Border Example </title>
</head>
<body>
<h2> HTML Table with Borders Example </h2>
<table border="1">
<tr>
<th> Name </th>
<th> Age </th>
<th> Country </th>
</tr>
<tr>
<td> Ariyan </td>
<td> 22 </td>
<td> India </td>
</tr>
<tr>
<td> Bella </td>
<td> 23 </td>
<td> Belgium </td>
</tr>
</table>
</body>
</html>

To change the border thickness to 1 pixel, add the border="1" attribute to the <table> tag as seen below. The border color choices are decided by the browser's default settings. The same goes for the other style choices for the table border design.

Now let me show you how you can add a border to your HTML table using CSS. Here is an example.

HTML table border using CSS

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Table Border Example</title>
<style>
/* CSS for table border */
table {

width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}

</style>
</head>
<body>
<h2> HTML Table with Borders Example using CSS </h2>
<table>
<tr>
<th> Name </th>
<th> Age </th>
<th> Country </th>
</tr>
<tr>
<td> Ariyan </td>
<td> 22 </td>
<td> India </td>
</tr>
<tr>
<td> Bella </td>
<td> 23 </td>
<td> Belgium </td>
</tr>
</table>
</body>
</html>

In the above example,

CSS uses border: 1px solid black; to style cell borders (<th> and <td>).
Padding and text alignment are also specified for improved readability.
The table contains data with boundaries dividing rows and columns to provide a clear structure.

HTML Table with Zebra Stripes (Vertical and Horizontal)

Now let me show you how you can alter the colors of cells alternatively both vertically and horizontally using the nth child attribute. Let me demonstrate with the help of an example.

Zebra stripes HTML table example

Output Zebra stripes HTML table example

Code:

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zebra Striped Table Example</title>
<style>
/* CSS for zebra stripes */
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2; /* Light gray background for headers */
}
tr:nth-child(even) {
background-color: lightgreen; /* Lightgreen background for even rows */
}
tr:nth-child(odd) {
background-color: lightblue; /* lightblue background for odd rows */
}
</style>
</head>
<body>
<h2> Zebra Striped Table Example in HTML </h2>
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Country</th>
</tr>
<tr>
<td> Ariyan </td>
<td> 22 </td>
<td> India </td>
</tr>
<tr>
<td> Shirin </td>
<td> 21 </td>
<td> UK </td>
</tr>
<tr>
<td> Bertha </td>
<td> 24 </td>
<td> America </td>
</tr>
<tr>
<td> Churro </td>
<td> 22 </td>
<td> Germany </td>
</tr>
</table>
</body>
</html>

In the above example,

Vertical zebra stripes are applied using the CSS selectors tr:nth-child(even) and tr:nth-child(odd), which establish alternating background colors for even and odd rows, respectively.
To create horizontal zebra stripes, set the background colors for the <th> and <td> elements.
Borders, padding, and alignment give the table a neat and orderly appearance.

Hoverable HTML table

Now that I have discussed the simple HTML table design, let's learn something more fun. The hover attribute helps us make the contents in the table hoverable. When the cursor is over a cell, we program it to change colors. Let me demonstrate with the help of an example.

HTML table hover example

Output for hoverable HTML table

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Hoverable Table Example in HTML suing CSS </title>
<style>
/* CSS for hoverable table */
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2; /* Light gray background for headers */
}
tr:hover {
background-color: lightgreen; /* Light green background on hover */
}
</style>
</head>
<body>
<h2>Hoverable Table Example</h2>
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Country</th>
</tr>
<tr>
<td> Ariyan </td>
<td> 22 </td>
<td> India </td>
</tr>
<tr>
<td> Shirin </td>
<td> 21 </td>
<td> UK </td>
</tr>
<tr>
<td> Bertha </td>
<td> 24 </td>
<td> America </td>
</tr>
<tr>
<td> Churro </td>
<td> 22 </td>
<td> Germany </td>
</tr>
</table>
</body>
</html>

In the example,

CSS uses border-collapse: collapse; to merge table borders and border: 1px solid black; to style cell borders (<th> and <td>).
Padding and text alignment are also specified for improved readability.
When the tr:hover selector is used, the background color of the rows turns to light green, resulting in a hover effect on the table rows.

In Conclusion

In this tutorial, we have discussed different HTML table design examples with code. We have learned the different attributes that can be inherently used in HTML. We have also learned how to use different properties in CSS using different HTML table style example. Now you are all set to use HTML table style in your next project to customize the tables exactly as you want.

HTML table style is one of the basic concepts to learn to become a a full-fledged web developer. If you want to learn more advanced concepts on HTML programming, I would highly recommend checking out certified courses from reputed platform. One such platform that comes to mind is upGrad. Their courses are curated by some of the best professors in this field. The courses are also in collaboration with some of the best universities around the world.

Frequently Asked Questions

What is the style attribute for a table in HTML?

The style attribute in HTML is used to apply inline CSS styles to components like tables. It allows you to control colors, borders, padding, and other HTML table style directly within the HTML tag.

How do I change the font style in a table in HTML?

To modify the font style in an HTML table style, use the style attribute within the <table>, <th>, <td>, or <caption> tags and give the required font variables, such as font-family, font-size, font-weight, and color.

How do you bold text in HTML table style?

To bold text in an HTML table, use the font-weight: bold; attribute within the <th> or <td> tags, or apply it directly in the <style> section or a CSS file linked to the HTML document.

How can I style the borders of an HTML table?

To style the borders of an HTML table, use the border, border-collapse, border-color, border-width, and border-style attributes inline within the <table> tag or in the CSS stylesheet.

Can I style specific cells or columns in an HTML table differently?

Yes, you can. To style specific cells or columns in an HTML table, use inline styles within the <td>, <th>, or <tr> tags, or give classes or IDs to these elements and style them in a CSS stylesheet.

Is it possible to alternate row colors in an HTML table?

Yes, it is possible to switch row colors in an HTML table. CSS classes such as (.even-row) and (.odd-row), each with a distinct background color, are often used to do just that. This improves readability and visual aesthetics by applying the effects to alternating rows.