A table is a structured set of data made up of rows and columns. 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.

The <table> tag defines an HTML table. Each table row is defined with a <tr> tag. Each table header is defined with a <th> tag. Each table data/cell is defined with a <td> tag.

By default, the text in <th> elements are bold and centered.

By default, the text in <td> elements are regular and left-aligned.

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Folau</td>
    <td>Kaveinga</td>
    <td>33</td>
  </tr>
  <tr>
    <td>Lisa</td>
    <td>Kaveinga</td>
    <td>33</td>
  </tr>
</table>

Colspan

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>Folau</td>
      <td>3101212123</td>
      <td>3101212124</td>
    </tr>
</table>

Rowspan

To make a cell span more than one row, use the rowspan attribute.

<table style="width:100%">
     <tr>
       <th>Name</th>
       <td>Folau</td>
     </tr>
     <tr>
       <th rowspan="2">Telephone</th>
       <td>3101212123</td>
     </tr>
     <tr>
       <td>3101212124</td>
     </tr>
 </table>

Table with css

• border define a border
• border-collapse collapse cell borders
• padding add padding to cells
• text-align align cell text
• border-spacing set the spacing between cells

<style>
     table {
         border-spacing: 5px;
     }
     table, th, td {
       border: 2px solid black;
       border-collapse: collapse;
     }
     th, td {
         padding: 15px;
     }
     th {
         text-align: left;
     }
     tr:nth-child(even) {
         background-color: #eee;
     }
     tr:nth-child(odd) {
         background-color: #fff;
     }
 </style>

Source code on Github