HTML Table Styling

There are several ways to style an HTML table, including:

Using inline styles: You can add inline styles to your table elements to change their appearance. For example:

<table style="border-collapse: collapse;">
  <tr>
    <th style="background-color: #f2f2f2;">Header 1</th>
    <th style="background-color: #f2f2f2;">Header 2</th>
  </tr>
  <tr>
    <td style="border: 1px solid black;">Cell 1</td>
    <td style="border: 1px solid black;">Cell 2</td>
  </tr>
</table>

2. Using a separate CSS file: You can define your table styles in a separate CSS file and link to it from your HTML document. For example:

<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <table class="my-table">
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
    </tr>
  </table>
</body>

.my-table {
  border-collapse: collapse;
}
.my-table th {
  background-color: #f2f2f2;
}
.my-table td {
  border: 1px solid black;
}

3. Using inline CSS: You can also define your table styles in the style attribute of the table element. This approach is similar to using inline styles, but allows you to define multiple styles in a single attribute. For example:

<table style="border-collapse: collapse; font-size: 1.2em;">
  <tr>
    <th style="background-color: #f2f2f2;">Header 1</th>
    <th style="background-color: #f2f2f2;">Header 2</th>
  </tr>
  <tr>
    <td style="border: 1px solid black;">Cell 1</td>
    <td style="border: 1px solid black;">Cell 2</td>
  </tr>
</table>

These are just a few examples of how you can style HTML tables using CSS. With CSS, you can customize the table border, cell padding and spacing, font size and style, background color, and more.

Leave a Reply Cancel reply