Rashi Chouksey

How to Used HTML Tables?

January 5, 2022

To add padding only above the content, use the padding-top property.

And the others sides with the padding-bottom, padding-left, and padding-right properties:

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.

Example

<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.

Example

<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 <th> elements are bold and centered, but we can change that with CSS.

HTML Table Borders

When I add a border to a table, also add borders around each table cell:

To add a border, use the CSS border property on table, th, and td elements:

Example

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

Collapsed Table Borders

To avoid having double borders like in the example above, set the CSS border-collapse property to collapse.

This will make the borders collapse into a single border:

Style Table Borders

We can set a background color of each cell, and give the border a white color (the same as the document background), we can get the impression of an invisible border:

Example

table, th, td {
  border: 1px solid white;
  border-collapse: collapse;
}
th, td {
  background-color: #96D4D4;
}

Round Table Borders

With the border-radius property, the borders get rounded corners:

Example

table, th, td {
  border: 1px solid black;
  border-radius: 10px;
}

kip the border around the table by leaving out table from the css selector:

Dotted Table Borders

With the border-style property, you can set the appearance of the border.

The following values are allowed:

  • dotted     
  • dashed     
  • solid     
  • double     
  • groove     
  • ridge     
  • inset     
  • outset     
  • none     
  • Hidden

Example

th, td {

  border-style: dotted;

}

HTML Table Sizes

HTML tables can have different sizes for each column, row or the entire table.

Use the style attribute with the width or height properties to specify the size of a table, row or column.

HTML Table Width

To set the width of a table, add the style attribute to the <table> element:

Note: Using a percentage as the size unit for a width means how wide will this element be compared to its parent element, which in this case is the <body> element.

HTML Table Column Width

To set the size of a specific column, add the style attribute on a <th> or <td> element:

HTML Table Padding & Spacing

HTML tables can adjust the padding inside the cells, and also the space between the cells.

HTML Table – Cell Padding

Cell padding is the space between the cell edges and the cell content.

By default the padding is set to 0.

To add padding on table cells, use the CSS padding property:

Example

th, td {
  padding: 15px;
}

To add padding only above the content, use the padding-top property.

And the others sides with the padding-bottom, padding-left, and padding-right properties:

Example

table {
  border-spacing: 30px;
}

HTML Table Colspan & Rowspan

HTML tables can have cells that spans over multiple rows and/or columns.

Note: The value of the colspan attribute represents the number of columns to span.

HTML Table Styling

Use CSS to make your tables look better.

HTML Table – Zebra Stripes

If we add a background color on every other table row,  will get a nice zebra stripes effect.


To style every other table row element, use the :nth-child(even) selector like this:

Example

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

HTML Table – Zebra Stripes

If we add a background color on every other table row, you will get a nice zebra stripes effect.

To style every other table row element, use the :nth-child(even) selector like this:

Example

 td:nth-child(even), th:nth-child(even) {
  background-color: #D6EEEE;
}
Share

You may also like...