HTML Tables

By | March 2, 2021

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

Example

Student ID Name Marks
S001 Sam 980
S002 Jose 975
S003 Ben 760
S004 Sofi 950
S005 Jack 948
S006 Tonny 945

HTML <table> element

To define a table we use the HTML <table> element.

Vamware

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

Student ID Name Marks
S001 Sam 980
S002 Jose 975
S003 Ben 760
S004 Sofi 950
S005 Jack 948
S006 Tonny 945

<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

Student ID Name Marks
S001 Sam 980
S002 Jose 975

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

Student Name Parent’s Telephone
Sam 988282828 728282828
Jose 975232322 782828282

<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

Student Name Parent’s Telephone
Sam 975232322
782828282

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

Student Details
Student ID Name Marks
S001 Sam 980
S002 Jose 975

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.

Leave a Reply

Your email address will not be published. Required fields are marked *