Rashi Chouksey

    How to Use HTML Tables?

December 1, 2022


A table is a structured set of data made up of rows and columns (tabular data). A table allows you to quickly and easily look up values that indicate some kind of connection between different types of data, for example a person and their age, or a day of the week, or the timetable for a local swimming pool.

How does a table work?

The point of a table is that it is rigid. Information is easily interpreted by making visual associations between row and column headers. Look at the table below for example we can find the answer by associating the relevant row and column headers.


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

<h2>A basic HTML table</h2>

<table style="width:100%">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>

<p>To undestand the example better, we have added borders to the table.</p>

</body>
</html>

Table Cells

Each table cell is defined by a <td> and a </td> tag. td stands for table data.Everything between <td> and </td> are the content of the table cell.

<table>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
</table>

Note: table data elements are the data containers of the table.
They can contain all sorts of HTML elements; text, images, lists, other tables, etc.

Table Rows

Each table row starts with a <tr> and ends with a </tr> tag.tr stands for table row.

<table>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
  <tr>
    <td>16</td>
    <td>14</td>
    <td>10</td>
  </tr>
</table>

we can have as many rows as you like in a table, just make sure that the number of cells are the same in each row.

There are times where a row can have less or more cells than another.

Table Headers

Sometimes we want the cells to be headers, in those cases use the <th> tag instead of the <td> tag:

By default, the text in elements are bold and centred, but we can change that with CSS.

HTML Table Borders

table, th, td {
  border: 1px solid green;

Share

You may also like...