HTML Tables - Deep Study About Styling, Captions, And Colgroup

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

<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>

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:

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

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:

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

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:

th, td{
	padding: 10px;
}

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:

table{
	border-spacing: 20px;
}

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:

<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>

<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>

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 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>

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.

<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>