HTML Table

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




Subscribe To Our Newsletter
You will receive our latest post and tutorial.
Thank you for subscribing!

required
required


Leave a Reply

Your email address will not be published.