Current Location：How HTML > HTML Articles > Content

HTML Table Style

HTML Table Style

Tables are a fundamental part of web design, used to present data in a clear and organized manner. However, tables can also be styled to enhance their appearance and make them more visually appealing. In this article, we will explore various ways to style HTML tables using CSS.

1. Basic Table Styling

To add styling to HTML tables, you can use CSS to customize properties such as font, color, borders, and spacing.

<!DOCTYPE html>
<html>
<head>
<style>
table {
    font-family: Arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #ddd;
    padding: 8px;
}

th {
    background-color: #f2f2f2;
}
</style>
</head>
<body>

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>how2html.com</td>
    <td>how2html.com</td>
  </tr>
  <tr>
    <td>how2html.com</td>
    <td>how2html.com</td>
  </tr>
</table>

</body>
</html>

Output:

HTML Table Style

2. Alternating Row Colors

To improve readability, you can apply alternating row colors to your table using CSS.

<!DOCTYPE html>
<html>
<head>
<style>
table {
    font-family: Arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #ddd;
    padding: 8px;
}

th {
    background-color: #f2f2f2;
}

tr:nth-child(even) {
    background-color: #f9f9f9;
}
</style>
</head>
<body>

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>how2html.com</td>
    <td>how2html.com</td>
  </tr>
  <tr>
    <td>how2html.com</td>
    <td>how2html.com</td>
  </tr>
</table>

</body>
</html>

Output:

HTML Table Style

3. Text Alignment

You can align text within table cells using CSS properties like text-align.

<!DOCTYPE html>
<html>
<head>
<style>
table {
    font-family: Arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
}

th {
    background-color: #f2f2f2;
}
</style>
</head>
<body>

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>how2html.com</td>
    <td>how2html.com</td>
  </tr>
  <tr>
    <td>how2html.com</td>
    <td>how2html.com</td>
  </tr>
</table>

</body>
</html>

Output:

HTML Table Style

4. Hover Effects

You can add hover effects to highlight rows when a user hovers over them.

<!DOCTYPE html>
<html>
<head>
<style>
table {
    font-family: Arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #ddd;
    padding: 8px;
}

th {
    background-color: #f2f2f2;
}

tr:hover {
    background-color: #f5f5f5;
}
</style>
</head>
<body>

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>how2html.com</td>
    <td>how2html.com</td>
  </tr>
  <tr>
    <td>how2html.com</td>
    <td>how2html.com</td>
  </tr>
</table>

</body>
</html>

Output:

HTML Table Style

5. Borders and Padding

You can customize the borders and padding of the table cells to create a more structured layout.

<!DOCTYPE html>
<html>
<head>
<style>
table {
    font-family: Arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 2px solid #ddd;
    padding: 12px;
}

th {
    background-color: #f2f2f2;
}
</style>
</head>
<body>

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>how2html.com</td>
    <td>how2html.com</td>
  </tr>
  <tr>
    <td>how2html.com</td>
    <td>how2html.com</td>
  </tr>
</table>

</body>
</html>

Output:

HTML Table Style

6. Striped Rows

You can create a striped effect by styling alternate rows with different background colors.

<!DOCTYPE html>
<html>
<head>
<style>
table {
    font-family: Arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #ddd;
    padding: 8px;
}

th {
    background-color: #f2f2f2;
}

tr:nth-child(even) {
    background-color: #f9f9f9;
}

tr:nth-child(odd) {
    background-color: #e9e9e9;
}
</style>
</head>
<body>

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>how2html.com</td>
    <td>how2html.com</td>
  </tr>
  <tr>
    <td>how2html.com</td>
    <td>how2html.com</td>
  </tr>
</table>

</body>
</html>

Output:

HTML Table Style

7. Border Radius

You can add border radius to table cells to round off the corners for a more modern look.

<!DOCTYPE html>
<html>
<head>
<style>
table {
    font-family: Arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #ddd;
    padding: 8px;
    border-radius: 5px;
}

th {
    background-color: #f2f2f2;
}
</style>
</head>
<body>

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>how2html.com</td>
    <td>how2html.com</td>
  </tr>
  <tr>
    <td>how2html.com</td>
    <td>how2html.com</td>
  </tr>
</table>

</body>
</html>

Output:

HTML Table Style

8. Centering the Table

You can center the table on the page by setting the left and right margins to auto.

<!DOCTYPE html>
<html>
<head>
<style>
table {
    font-family: Arial, sans-serif;
    border-collapse: collapse;
    width: 80%;
    margin: 0 auto;
}

td, th {
    border: 1px solid #ddd;
    padding: 8px;
}

th {
    background-color: #f2f2f2;
}
</style>
</head>
<body>

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>how2html.com</td>
    <td>how2html.com</td>
  </tr>
  <tr>
    <td>how2html.com</td>
    <td>how2html.com</td>
  </tr>
</table>

</body>
</html>

Output:

HTML Table Style

9. Adding Box Shadow

You can add a subtle box shadow to the table to create a visual separation from the background.

<!DOCTYPE html>
<html>
<head>
<style>
table {
    font-family: Arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
}

td, th {
    border: 1px solid #ddd;
    padding: 8px;
}

th {
    background-color: #f2f2f2;
}
</style>
</head>
<body>

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>how2html.com</td>
    <td>how2html.com</td>
  </tr>
  <tr>
    <td>how2html.com</td>
    <td>how2html.com</td>
  </tr>
</table>

</body>
</html>

Output:

HTML Table Style

10. Adding a Background Image

You can set a background image for the table to add a unique visual element.

<!DOCTYPE html>
<html>
<head>
<style>
table {
    font-family: Arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
    background-image: url('table-background.jpg');
    background-size: cover;
}

td, th {
    border: 1px solid #ddd;
    padding: 8px;
}

th {
    background-color: #f2f2f2;
}
</style>
</head>
<body>

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>how2html.com</td>
    <td>how2html.com</td>
  </tr>
  <tr>
    <td>how2html.com</td>
    <td>how2html.com</td>
  </tr>
</table>

</body>
</html>

Output:

HTML Table Style

These are just a few examples of how you can style HTML tables using CSS. By experimenting with different properties and values, you can create unique and visually appealing table designs for your website.

Like(0)

HTML Articles