1. What are HTML Tables?

Whenever we need to display tabular data like customer details, list of products, and other related data, we use HTML tables. This tabular data is well arranged and easy to read or access. Usually, a table puts data in well-arranged boxes with a specific location, that is more easy for a developer and viewer to understand.

1.1. Features of HTML Tables

An HTML table can have following components and features. These features creates a way or path for the developers to design tables. These features are listed below:

  • We define tables by using <table> element
  • A table can have multiple rows and columns
  • We define rows by using <tr> element
  • Furthermore <tr> has sub elements to divide the table into columns called table cells
  • To define a table cell, we use <td> element
  • Interestingly, the header cells can be defined using <th> element
  • Also we can style our tables by adding paddings, borders and other CSS properties
  • A table can have many table cells, depending upon the need
  • Also We can extend our tables by table header, table body and table footer
  • A table header can be defined by <thead> element
  • Moreover we can define the body of the table by using <tbody> element
  • Also we can define footer of table by using <tfoot> element
  • Like images, we can add captions to the table with <caption> element
  • We can extend the tables by using <colgroup> element and <col> tag

Tutorial Contents:

  1. Intro to HTML Tables
  2. How to Style an HTML Table?
  3. How to Add Captions For Tables?
  4. What is Colgroup in HTML Tables?

Consider This:

Unlike <td>, the text contained within <th> element is centered an bold by default.
Whereas <td> are data containers, they can have any form of text, images, list, other HTML elements and even tables.

Example

Customer Products Bill
John 3 240$
Veronika 13 1230$
Alfred 5 450$
Max 19 980$
Charlotte 5 90$
Ketti 17 190$
<table>
  <thead>
  <tr>
    <td>Customer</td>
    <td>Products</td>
    <td>Bill</td>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>John</td>
    <td>3</td>
    <td>240$</td>
  </tr>
  <tr>…</tr>
  <tr>…</tr>
  <tr>…</tr>
  <tr>…</tr>
  <tr>…</tr>
  </tbody>
</table>

Try in CodeLab

2. HTML Tables Styling

Interestingly, we can style tables with CSS styles. We can style each and every single element of the table using css element selectors. For more detailed styling of tables, see our CSS tables tutorial.

2.1. HTML Tables – Border Property

We can add borders to our tables and its child elements like table row or cells. To do this we use CSS border property. Furthermore always define borders for both table and its cells. See the below example to understand it completely:

Border

table, th, td{
	border: 1px solid #999;
}

Try in CodeLab

2.2. HTML Tables – Collapsed Border Property

Sometime we need to collapse the borders of the table cells into each other. We do this by using CSS border-collapse property. Check the below example:

Collapsed Border

table, th, td{
	border: 1px solid #999;
	border-collapse: collapse;
}

Try in CodeLab

2.3. HTML Tables – Cellpadding Property

We can specify the space between the cell text and the border by CSS padding property. Padding will make the text more readable. For more information, check the below example:

Cell Padding

th, td{
	padding: 10px;
}

Try in CodeLab

2.4. HTML Tables – Border Spacing Property

To make the spacing between table cells, we use CSS border-spacing property. Also you cannot use border-collapse with border spacing property. Check the below instance:

Border Spacing

table{
	border-spacing: 20px;
}

Try in CodeLab

2.5. HTML Tables – Colspan and RowSpan

Some time we need certain table cells to cover more than one row or column, unlike surrounding cells. We do this by using colspan attribute or rowspan attribute. See the results in codelab:

Colspan

<table style=”width: 100%;”>
 <tr>
  <th>User</th>
  <th colspan=”2″>Telephones</th>
 </tr>
<tbody>
 <tr>
  <td>joh</td>
  <td>19876424</td>
  <td>12133665</td>
 </tr>
</tbody>
</table>

Try in CodeLab

Rowspan

<table style=”width: 100%;”>
 <tr>
  <th>User</th>
  <td>John</td>
 </tr>
<tbody>
 <tr>
  <th rowspan=”2″>Telephones</th>
  <td>19876424</td>
 </tr>
 <tr>
  <td>19803123</td>
 </tr>
</tbody>
</table>

Try in CodeLab

3. HTML Tables – Adding Caption

Likewise we added caption for HTML images in HTML Images tutorial, we can define caption for HTML tables too. We do this by using a <caption> element. Try in codelab to understand it clearly:

Table Caption

Note: Table caption must always come after the initial table tag.
<table style=”width: 100%;”>
<caption style=”background:#ddd;padding: 10px;”>Users Ids and Passwords</caption>
  <tr>
	<th>User</th>
	<th>ID</th>
	<th>Password</th>
  </tr>
  <tbody>
  <tr>
	<td>joh</td>
	<td>john_123</td>
	<td>iAMjon_123</td>
  </tr>
  </tbody>
</table>

Try in CodeLab

4. HTML Tables – Colgroup

Colgroup defines the table into different groups depending upon the columns. After grouping we can apply styles to individual columns without repetition. <colgroup> comes after the table and caption tag. Colgroup takes <col> tags to select the columns.

Note: Table caption must always come after the initial table tag.

Colgroup

A col tag has no ending tag.
<table style=”width: 100%;”>
  <colgroup>
	<col span=”2″ style=”background-color: blue;”>
	<col style=”background-color: red;”>
  </colgroup>
  <tr>
	<th>User</th>
	<th>ID</th>
	<th>Password</th>
  </tr>
  <tbody>
  <tr>
	<td>joh</td>
	<td>john_123</td>
	<td>iAMjon_123</td>
  </tr>
  </tbody>
</table>

Try in CodeLab

Give Us Your Feedback
OR
If You Need Any Help!
Contact Us