HTML Lists and Tables

Table Styling & Borders

HTML tables look plain by default - but with a few CSS properties, you can turn them into clean, professional, and visually appealing data tables.
This chapter will show you how to add borders, colors, spacing, hover effects, and full styling control over your tables.

Default Table Look

By default, an HTML table only shows data without borders or spacing.

Default Table

html

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Alissha</td>
    <td>28</td>
  </tr>
</table>

Adding Basic Borders

You can add a border to your table using either the HTML border attribute (not recommended anymore) or CSS styling.

Using HTML Attribute (Old Method)

html

<table border="1">
  <tr><th>Name</th><th>Age</th></tr>
  <tr><td>Alissha</td><td>28</td></tr>
</table>

⚠️ Not recommended in HTML5 - use CSS instead.

Using CSS (Modern Method)

Table Border Example

html

<style>
table, th, td {
  border: 1px solid black;
}
</style>

<table>
  <tr><th>Name</th><th>Age</th></tr>
  <tr><td>Alissha</td><td>28</td></tr>
</table>

Explanation:

border: 1px solid black; adds a one-pixel black border.
The same rule applies to <table>, <th>, and <td>.

Removing Double Borders

When adding borders to both <table> and <td>, you may see double borders.
Use the border-collapse property to fix this.

Double Border Remove

html

<style>
table {
  border-collapse: collapse;
  width: 60%;
}
th, td {
  border: 1px solid #29AB87;
  padding: 8px;
  text-align: left;
}
</style>

<table>
  <tr><th>Name</th><th>Age</th></tr>
  <tr><td>Swapnil</td><td>30</td></tr>
  <tr><td>Alissha</td><td>28</td></tr>
</table>

Adding Table Padding & Spacing

Padding - space inside a cell

Cell Inside Space Example

css

th, td {
  padding: 10px;
}

Spacing - space between cells

Space Between Cells Example

css

table {
  border-spacing: 5px;
}

💡 Tip: border-collapse: collapse; removes cell spacing, while border-spacing adds it.

Adding Colors & Backgrounds

You can style your table cells using CSS background and text colors.

Table Colors Example

html

<style>
th {
  background-color: #29AB87;
  color: white;
}
td {
  background-color: #f9f9f9;
}
</style>

Output:

Header row has a green background and white text.
Table data has a soft gray background.

Adding Hover Effects

Hover effects make tables more interactive and readable.

Hover Effect Example

html

<style>
tr:hover {
  background-color: #eafaf3;
}
</style>

When you move your mouse over a row, it changes color.

Aligning Text

You can align text left, center, or right using text-align.

Align Example

css

th {
  text-align: center;
}
td {
  text-align: right;
}

Table Width, Height, and Alignment

You can set table dimensions using CSS:

Table Width & Height

css

table {
  width: 100%;
  height: auto;
}

To center your table:

Table Alignment Example

css

table {
  margin-left: auto;
  margin-right: auto;
}

Stylish Table Example

Here’s a complete example showing modern styling, hover, and even zebra stripes:

Table Example

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Table Styling Example</title>
<style>
table {
  width: 80%;
  border-collapse: collapse;
  margin: 20px auto;
  font-family: Arial, sans-serif;
}
caption {
  caption-side: top;
  font-weight: bold;
  margin-bottom: 10px;
  color: #29AB87;
}
th, td {
  border: 1px solid #ddd;
  padding: 10px 15px;
  text-align: left;
}
th {
  background-color: #29AB87;
  color: #fff;
}
tr:nth-child(even) {
  background-color: #f9f9f9;
}
tr:hover {
  background-color: #e6f5ef;
}
</style>
</head>
<body>

<h2>Styled Employee Data Table</h2>
<table>
  <caption>Employee Information</caption>
  <tr>
    <th>Name</th>
    <th>Department</th>
    <th>Salary</th>
  </tr>
  <tr>
    <td>Alissha</td>
    <td>Design</td>
    <td>$5000</td>
  </tr>
  <tr>
    <td>Swapnil</td>
    <td>Development</td>
    <td>$6000</td>
  </tr>
  <tr>
    <td>Rahul</td>
    <td>Marketing</td>
    <td>$4500</td>
  </tr>
</table>

</body>
</html>

What you’ll see:

A centered table with borders, background colors, zebra stripes, and hover effects.
Beautiful readability and professional structure.

Responsive Table Design (for Mobile)

To make your table scrollable on small screens:

Responsive Table

html

<div style="overflow-x:auto;">
  <table> ... </table>
</div>

This ensures that your table does not break layout on mobile devices.

Browser Support

Chrome	Edge	Firefox	Safari	Opera	IE9+
Yes	Yes	Yes	Yes	Yes	Yes

Conclusion

HTML tables become visually appealing with just a few CSS rules.
By adding borders, colors, padding, and hover effects, you make your tables cleaner, more readable, and mobile-friendly.

Remember: always use CSS for styling, not old HTML attributes.

PreviousHTML Tables NextHTML Images

HTML Lists and Tables

Table Styling & Borders

HTML tables look plain by default - but with a few CSS properties, you can turn them into clean, professional, and visually appealing data tables.
This chapter will show you how to add borders, colors, spacing, hover effects, and full styling control over your tables.

Default Table Look

By default, an HTML table only shows data without borders or spacing.

Default Table

html

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Alissha</td>
    <td>28</td>
  </tr>
</table>

Adding Basic Borders

You can add a border to your table using either the HTML border attribute (not recommended anymore) or CSS styling.

Using HTML Attribute (Old Method)

html

<table border="1">
  <tr><th>Name</th><th>Age</th></tr>
  <tr><td>Alissha</td><td>28</td></tr>
</table>

⚠️ Not recommended in HTML5 - use CSS instead.

Using CSS (Modern Method)

Table Border Example

html

<style>
table, th, td {
  border: 1px solid black;
}
</style>

<table>
  <tr><th>Name</th><th>Age</th></tr>
  <tr><td>Alissha</td><td>28</td></tr>
</table>

Explanation:

border: 1px solid black; adds a one-pixel black border.
The same rule applies to <table>, <th>, and <td>.

Removing Double Borders

When adding borders to both <table> and <td>, you may see double borders.
Use the border-collapse property to fix this.

Double Border Remove

html

<style>
table {
  border-collapse: collapse;
  width: 60%;
}
th, td {
  border: 1px solid #29AB87;
  padding: 8px;
  text-align: left;
}
</style>

<table>
  <tr><th>Name</th><th>Age</th></tr>
  <tr><td>Swapnil</td><td>30</td></tr>
  <tr><td>Alissha</td><td>28</td></tr>
</table>

Adding Table Padding & Spacing

Padding - space inside a cell

Cell Inside Space Example

css

th, td {
  padding: 10px;
}

Spacing - space between cells

Space Between Cells Example

css

table {
  border-spacing: 5px;
}

💡 Tip: border-collapse: collapse; removes cell spacing, while border-spacing adds it.

Adding Colors & Backgrounds

You can style your table cells using CSS background and text colors.

Table Colors Example

html

<style>
th {
  background-color: #29AB87;
  color: white;
}
td {
  background-color: #f9f9f9;
}
</style>

Output:

Header row has a green background and white text.
Table data has a soft gray background.

Adding Hover Effects

Hover effects make tables more interactive and readable.

Hover Effect Example

html

<style>
tr:hover {
  background-color: #eafaf3;
}
</style>

When you move your mouse over a row, it changes color.

Aligning Text

You can align text left, center, or right using text-align.

Align Example

css

th {
  text-align: center;
}
td {
  text-align: right;
}

Table Width, Height, and Alignment

You can set table dimensions using CSS:

Table Width & Height

css

table {
  width: 100%;
  height: auto;
}

To center your table:

Table Alignment Example

css

table {
  margin-left: auto;
  margin-right: auto;
}

Stylish Table Example

Here’s a complete example showing modern styling, hover, and even zebra stripes:

Table Example

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Table Styling Example</title>
<style>
table {
  width: 80%;
  border-collapse: collapse;
  margin: 20px auto;
  font-family: Arial, sans-serif;
}
caption {
  caption-side: top;
  font-weight: bold;
  margin-bottom: 10px;
  color: #29AB87;
}
th, td {
  border: 1px solid #ddd;
  padding: 10px 15px;
  text-align: left;
}
th {
  background-color: #29AB87;
  color: #fff;
}
tr:nth-child(even) {
  background-color: #f9f9f9;
}
tr:hover {
  background-color: #e6f5ef;
}
</style>
</head>
<body>

<h2>Styled Employee Data Table</h2>
<table>
  <caption>Employee Information</caption>
  <tr>
    <th>Name</th>
    <th>Department</th>
    <th>Salary</th>
  </tr>
  <tr>
    <td>Alissha</td>
    <td>Design</td>
    <td>$5000</td>
  </tr>
  <tr>
    <td>Swapnil</td>
    <td>Development</td>
    <td>$6000</td>
  </tr>
  <tr>
    <td>Rahul</td>
    <td>Marketing</td>
    <td>$4500</td>
  </tr>
</table>

</body>
</html>

What you’ll see:

A centered table with borders, background colors, zebra stripes, and hover effects.
Beautiful readability and professional structure.

Responsive Table Design (for Mobile)

To make your table scrollable on small screens:

Responsive Table

html

<div style="overflow-x:auto;">
  <table> ... </table>
</div>

This ensures that your table does not break layout on mobile devices.

Browser Support

Chrome	Edge	Firefox	Safari	Opera	IE9+
Yes	Yes	Yes	Yes	Yes	Yes

Conclusion

HTML tables become visually appealing with just a few CSS rules.
By adding borders, colors, padding, and hover effects, you make your tables cleaner, more readable, and mobile-friendly.

Remember: always use CSS for styling, not old HTML attributes.

PreviousHTML Tables NextHTML Images