HTML Tables

HTML provides tables to arrange and display data using rows and columns.

Example

HTML <table> element

To define a table we use the HTML <table> element. Inside the <table> the element we use the <tr> element to represent table rows, <th> for table heading and <td> for table data. We fill the data inside the table row-wise.

Example

<table>
  <tr>
    <th>Student ID</th>
    <th>Name</th>
    <th>Marks</th>
  </tr>

  <tr>
    <td>S001</td>
    <td>Sam</td>
    <td>980</td>
  </tr>

  <tr>
    <td>S002</td>
    <td>Jose</td>
    <td>975</td>
  </tr>

  <tr>
    <td>S003</td>
    <td>Ben</td>
    <td>760</td>
  </tr>

  <tr>
    <td>S004</td>
    <td>Sofi</td>
    <td>950</td>
  </tr>
  
  <tr>
    <td>S005</td>
    <td>Jack</td>
    <td>948</td>
  </tr>

  <tr>
    <td>S006</td>
    <td>Tonny</td>
    <td>945</td>
  </tr>
</table>

Output

<td> element can have any type of HTML data which include text, image, video, audio, etc.

Table Border

border is a CSS property so it can be applied using style attribute or element. If we do not mention the border property, then the browser will not show any border around the table.

Example

<table style="border: 2px solid red">
  <tr>
    <th>Student ID</th>
    <th>Name</th>
    <th>Marks</th>
  </tr>

  <tr>
    <td>S001</td>
    <td>Sam</td>
    <td>980</td>
  </tr>
 
  <tr>
    <td>S002</td>
    <td>Jose</td>
    <td>975</td>
  </tr>
</table>

Output

Table Border Collapse

border-collapse is also a CSS property which merges the adjacent border cells.

Example

table, th, td
{
border: 2px solid blue;
border-collapse: collapse;
}

Table Cell Padding

The cell padding defines the spacing between cell data and its border. If we do not mention the padding then by default, there would be no spacing between the data and its border.

Example

td {
border: 2px solid red;
padding: 20px;
}

Align Table Data

By default, the browser bold and centralize the <th> data, whereas the <td> data usually print with the left alignment. However, using the text-align property of CSS, we can change the alignment of table cell data.

Example

td {
text-align: center;
}

Table Border Spacing

border-spacing is a CSS property which defines the spacing between the border of table cells.

Example

table {
  border-spacing: 10px;
}

<th> and <td> colspan attribute

colspan is an attribute that can be used with <th> and <td> element to increase the column span.

Example

<table>
<tr>
<th>Student Name</th>

<!-- This table heading will take space of two columns -->
<th colspan="2">Parent's Telephone</th>
</tr>

<tr>

<td>Sam</td>
<td>988282828</td>
<td>728282828</td>
</tr>

<tr>
<td>Jose</td>
<td>975232322</td>
<td>782828282</td>
</tr>

</table>

Output

<th> and <td> rowspan attribute

Similar to colspan, rowspan attribute is used to span the row by more than one row.

Example

<table>
<tr>
<th>Student Name</th>
<th>Parent's Telephone</th>
</tr>

<tr>
<!-- This table data will occupy two rows -->
<td rowspan="2">Sam</td>
<td>975232322</td>
</tr>

<tr>
<td>782828282</td>
</tr>

</table>

Output

Table Caption

The <caption> element provides a title to the table. Using the caption element, we can set the table heading and tell the user what this table is all about.

Example

<table>

<caption>Student Details</caption>

<tr>
<th>Student ID</th>
<th>Name</th>
<th>Marks</th>
</tr>

<tr>
<td>S001</td>
<td>Sam</td>
<td>980</td>
</tr>

<tr>
<td>S002</td>
<td>Jose</td>
<td>975</td>
</tr>
</table>

Output

Summary

• In HTML we have <table> element to represent table on the web-page.
• <table> element contain child element <tr>.
• <tr> represent table row and it contain two main child elements <th> and <td>.
• <th> define table heading and it normally used with the first <tr> element.
• <td> represent table data and it can contain any type of HTML element.
• colspan is an attribute which increases the column span by occupying its neighbour columns.
• rowspan attribute can increase the span of a row by occupying the neighbouring rows.