How To Define Html Table?

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 loss some of its popularity. In this tutorial we will look 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 tag. Table headers are put into 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>
Add Border To Table
Add Border To Table

 

Table Cells Those Span Multiple Columns

In some situations we may need to span single cell into multiple columns. In this situations we will use colspan attribute of table header with the span count. For example we want to use single Phone number header but get two phone number 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 Columns
Table Cells Those Span Multiple Columns

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>
Table Cells Those Span Multiple Rows
Table Cells Those Span Multiple Rows

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>
Adding Caption To Html Table
Adding Caption To Html 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>

Leave a Comment