HTML Tables

HTML Tables are very helpful when you want to share information / data that needs to be displayed in a table like format.

The HTML table element starts off with <table> and has the companion closing tag </table>

You will also find other HTML Elements that can be best described by showing you a code example.

<table>
    <tr>
        <th>Table Header</th>
        <th>Table Header</th>
        <th>Table Header</th>
    </tr>
    <tr>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
    </tr>
    <tr>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
    </tr>
</table>

In the code above, we use various HTML Elements nested in each other. We start off with the <table> tag and follow that with the <tr> tag which is for a table row. We also have the <th> tag which is used for the table header which can be used for whatever the column represents. You will also notice the <td> which is where you place the actual data itself.

You could style your HTML Tables with CSS. Below is a sample code snippet for styling your tables.

table {
        width:100%;
}
   
table, th, td {
        border: 1px solid red;
    }

Alternating Background Colors

You can alternate the background color of each row by using some CSS

table tr:nth-child(even) {
    background-color: #eee;
}
table tr:nth-child(odd) {
    background-color: #fff;
}

The above code snippet alternates between a light grey and white for each table row. It does this by using the table tr:nth-child(even) and table tr:nth-child(odd).

You would place the CSS in a style sheet located in your project. You can also use <style></style> in the head section of the HTML Document but that’s the topic of another tutorial.

HTML Table with Cells that Span Columns

<table>
  <tr>
    <th>Name</th>
    <th colspan="3">Websites</th>
  </tr>
  <tr>
    <td>PixemWeb</td>
    <td>Instagram PixemWeb</td>
    <td>YouTube PixemWeb</td>
    <td>Google PixemWeb</td>
  </tr>
</table>

In the above code example, we use the colspan attribute to span 3 columns.

HTML Table with Cells that Span Rows

<table>
  <tr>
    <th>Name:</th>
    <td>Joel</td>
  </tr>
  <tr>
    <th rowspan="3">Websites:</th>
    <td>Instagram PixemWeb</td>
  </tr>
  <tr>
    <td>YouTube PixemWeb</td>
  </tr>
  <tr>
    <td>Google PixemWeb</td>
  </tr>
</table>

In the above code example, we use the rowspan attribute to span 3 rows.

There are a lot of things you can do with HTML Tables. There are ways to make them responsive but I’ll save that for a CSS Tutorial.

Share This On: