HTML TABLES

HTML Table: An HTML table is defined with the <table> tag. Each table row is defined with the <tr> tag. A table header is defined with the <th> tag. By default, table headings are bold and centred. A table data/cell is defined with the <td> tag.

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Smith</td>
    <td>30</td>
  </tr>
  <tr>
    <td>Mary</td>
    <td>Jackson</td>
    <td>26</td>
  </tr>
</table>

HTML Border: If you do not specify a border for the table, it will be displayed without borders.

A border is set using the CSS border property

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

HTML Collapsed Borders: If you want the borders to collapse into one border, add the CSS border-collapse property.

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

HTML Cell Padding: Cell padding specifies the space between the cell content and its borders. If you do not specify a padding, the table cells will be displayed without padding.

To set the padding, use the CSS padding property

th, td {
  padding: 15px;
}

HTML Table – Left-align Headings: By default, table headings are bold and centred. To left-align, the table headings, use the CSS text-align property.

th {
  text-align: left;
}

HTML Table – Adding Border Spacing: Border spacing specifies the space between the cells.

To set the border-spacing for a table, use the CSS border-spacing property.

table {
  border-spacing: 5px;
}

HTML Table – Cells that Span Many Columns: To make a cell span more than one column, use the colspan attribute.

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Henry ford</td>
    <td>66777854</td>
    <td>44477855</td>
  </tr>
</table>

HTML Table – Cells that Span Many Rows: To make a cell span more than one row, use the rowspan attribute

<table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Henry <ord/td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>66577854</td>
  </tr>
  <tr>
    <td>44577855</td>
  </tr>
</table>

HTML Table – Adding a Caption: To add a caption to a table, use the <caption> tag.

<table style="width:100%">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$200</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$79</td>
  </tr>
</table>