Html Table is used to present structured data in the web pages. Html table was very popular in previous days but with the more dynamic applications and div usage it lost some of its popularity. In this tutorial, we will look at basic table features.

Define Html Table

Table definition might be seen a bit confusing but it is actually not so complex. We will use <table> , <tr> , <th> , <td> tags. We will look in detail these tags.

<table> 
   <tr> 
      <th>Firstname</th> 
      <th>Lastname</th> 
   </tr> 
   <tr> 
      <td>Pof</td> 
      <td>Tut</td> 
   </tr> 
   <tr> 
      <td>Ahmet</td> 
      <td>Ali</td> 
   </tr> 
   <tr> 
      <td>John</td> 
      <td>Doe</td> 
   </tr> 
</table>

Table Row

Table rows are presented with <tr> tag. <tr> tags are inserted into <table> tags like below.

<table> 
   <tr> 
     ...
   </tr>
</table>

Table Header

Table headers are used to describe table columns. <th> is used for table header tags. Table headers are put into the first table row.

<table> 
   <tr> 
      <th>Firstname</th> 
      <th>Lastname</th> 
   </tr>
   ...
 </table>

Table Data

Table data represented with <td> tag and holds the data we want to show in table cells.Table data is put into table rows according to table header count.

<table> 
   <tr> 
      <th>Firstname</th> 
      <th>Lastname</th> 
   </tr>
  <tr>
    <td>Ahmet</td>
    <td>Ali</td>
  </tr>
  ...
 </table>

Add Border To Table

By default html tables do not have any visible border. In order to show borders we need to add border style to the table style.

<table style="border: 1px solid black;"> 
   <tr> 
      <th>Firstname</th> 
      <th>Lastname</th> 
   </tr>
  <tr>
    <td>Ahmet</td>
    <td>Ali</td>
  </tr>
 </table>

Table Cells Those Span Multiple Columns

In some situations, we may need to span a single cell into multiple columns. In this situation, we will use colspan attribute of table header with the span count. For example, we want to use a single Phone number header but get two phone numbers with two cells.

<table> 
  <tr> 
    <th>Firstname</th> 
    <th colspan="2">Phone Numbers</th> 
  </tr> 
  <tr> 
    <td>Ahmet</td> 
    <td>555 555 55 55</td> 
    <td>666 6666 66 66</td> 
  </tr> 
</table>

Table Cells Those Span Multiple Rows

Another span example is using multiple rows for single data. We will use rowspan attribute in table header with the number or rows.

<table> 
  <tr> 
    <th>Name:</th> 
    <td>Ahmet Ali</td> 
  </tr> 
  <tr> 
    <th rowspan="2">Telephone:</th> 
    <td>555 555 55 55</td> 
  </tr> 
  <tr> 
    <td>666 666 66 66</td> 
  </tr> 
</table>

Adding Caption To Html Table

We can add caption to the Html table with <caption> tag. Caption will be shown before table and will not put into cells.

<table> 
  <caption>Person Ages</caption> 
  <tr> 
    <th>Person</th> 
    <th>Age</th> 
  </tr> 
  <tr> 
    <td>Ahmet</td> 
    <td>5</td> 
  </tr> 
  <tr> 
    <td>Ali</td> 
    <td>5</td> 
  </tr> 
</table>

Html Table Styling

We can set general styling for all <table> tags by using CSS in the header part of the Html page.

<head>

<style> 
table, th, td { 
    border: 1px solid black; 
    border-collapse: collapse; 
} 
th, td { 
    padding: 5px; 
    text-align: left; 
} 
</style>

</head>

LEARN MORE Display Detailed System Information With Systeminfo For Windows Operating Systems

How To Define Html Table?