Core HTML
Lesson 29: Table Formatting
Overview
In this HTML lesson, we demonstrate the advanced features of HTML tables. First, we introduce the caption element and the rowspan and colspan attributes. Then we show how column groups can be used to style columns and groups of columns of a table. Next, we demonstrate how the thead, tbody, and tfoot elements can be used to style groups of rows. Finally, we put everything together in one table and introduce the scope attribute.
Captions, Rowspans, and Colspans
Our first example shows a table with a caption and data entries with various row spans and column spans. The table consists of two columns. The entries in the left column span multiple rows. This is achieved by setting the rowspan attribute to the number of rows that the entry will span. Additionally, we eliminate the second entry from the rows over which the entry spans. At the bottom of the table, we have an entry that spans 2 columns, using the colspan attribute.
At the top of the table, we have a caption: "The Order of the Mass." The caption acts like a title for the table and appears above the middle of the table. Inside the document, the caption must be place directly after the opening table tag.
Example1.html
<!DOCTYPE html>
<html>
<head>
<title>XoaX.net HTML</title>
<style>
table, td, th {
border:1px solid black;
}
td {
padding-left: 5px;
padding-right: 5px;
}
</style>
</head>
<body>
<table>
<caption>The Order of the Mass</caption>
<tr>
<th>Parts of the Mass</th>
<th>Rites</th>
</tr>
<tr>
<td rowspan="3">Introductory Rites</td>
<td>Greeting</td>
</tr>
<tr>
<td>Penitential Act</td>
</tr>
<tr>
<td>Gloria</td>
</tr>
<tr>
<td rowspan="6">Liturgy of the Word</td>
<td>First Reading</td>
</tr>
<tr>
<td>Psalm</td>
</tr>
<tr>
<td>Second Reading</td>
</tr>
<tr>
<td>Gospel</td>
</tr>
<tr>
<td>Homily</td>
</tr>
<tr>
<td>Creed</td>
</tr>
<tr>
<td rowspan="6">Liturgy of the Eucharist</td>
<td>Preparation of the Gifts</td>
</tr>
<tr>
<td>The Euchaaristic Prayer</td>
</tr>
<tr>
<td>Communion Rite</td>
</tr>
<tr>
<td>Rite of Peace</td>
</tr>
<tr>
<td>Fraction Rite</td>
</tr>
<tr>
<td>Communion</td>
</tr>
<tr>
<td rowspan="2">The Concluding Rites</td>
<td>Blessing</td>
</tr>
<tr>
<td>Dismissal</td>
</tr>
<tr>
<th colspan="2">The Mass</th>
</tr>
</table>
</body>
</html>Output
More Captions, Rowspans, and Colspans
This second example is a table of prime numbers with the data entries containing composite numbers that are the product of the prime numbers that the data entry spans. This arficial table serves to further illustrate the rowspan and colspan attributes, as well as the caption element.
Example2.html
<!DOCTYPE html>
<html>
<head>
<title>XoaX.net HTML</title>
<style>
table, td, th {
border:1px solid black;
}
td,th {
padding: 15px;
}
</style>
</head>
<body>
<table>
<caption>Prime</caption>
<tr>
<th>P</th>
<th>2</th>
<th>3</th>
<th>5</th>
<th>7</th>
</tr>
<tr>
<th>2</th>
<td colspan="2" rowspan="2">6</td>
<td colspan="2">70</td>
</tr>
<tr>
<th>3</th>
<td colspan="2">105</td>
</tr>
<tr>
<th>5</th>
<td rowspan="3">770</td>
<td rowspan="3">1155</td>
<td colspan="2" rowspan="3">385</td>
</tr>
<tr>
<th>7</th>
</tr>
<tr>
<th>11</th>
</tr>
</table>
</body>
</html>Output
Columns and Column Groups
In this example, we demonstrate how to use column and column group elements to style a table. The colgroup element must appear directly below the caption or the opening table tag, if there is no caption. Inside the colgroup element, we place col elements to represent each column group. The col element has a span attribute that is used to specify how many columns the group spans. These column groups can be used to style the column or group of columns, as we do here.
Example3.html
<!DOCTYPE html>
<html>
<head>
<title>XoaX.net HTML</title>
<style>
table, td, th {
border:1px solid black;
}
td,th {
padding: 10px;
}
</style>
</head>
<body>
<table>
<caption>Financials</caption>
<colgroup>
<col style="background-color:khaki;">
<col span="4" style="background-color:ivory;">
<col style="background-color:beige;">
</colgroup>
<tr>
<th>Company</th>
<th>Q1</th>
<th>Q2</th>
<th>Q3</th>
<th>Q4</th>
<th>Year</th>
</tr>
<tr>
<td>ABC</td>
<td>3400</td>
<td>4100</td>
<td>2500</td>
<td>4300</td>
<td>14300</td>
</tr>
<tr>
<td>DEF</td>
<td>7300</td>
<td>6800</td>
<td>5900</td>
<td>5500</td>
<td>25500</td>
</tr>
<tr>
<td>GHI</td>
<td>5800</td>
<td>3800</td>
<td>4200</td>
<td>6400</td>
<td>20200</td>
</tr>
</table>
</body>
</html>Output
Header, Body, and Footer
This example shows how to use the thead, tbody, and tfoot elements to style the rows and row groups of a table. The header and footer are especially important for large tables that span multiple pages. In this case, the header and footer appear at the top and bottom of every page, when the table is printed. The thead, tbody, and tfoot elements can all be used for styling, with the header styling the top portion, the footer styling the bottom portion, and the body styling groups of rows in between. Note that we can use multiple tbody sections to style multiple row groups, much like our colgroups element was used to style column groups.
Example4.html
<!DOCTYPE html>
<html>
<head>
<title>XoaX.net HTML</title>
<style>
table, td, th {
border:1px solid black;
}
td,th {
padding: 10px;
}
thead {
background-color:gainsboro;
}
tbody {
background-color:lightcyan;
}
tfoot {
background-color:orange;
}
</style>
</head>
<body>
<table>
<caption>Church Councils</caption>
<thead>
<tr>
<th>Council</th>
<th>Year</th>
<th>Heresy</th>
<th>Resolution</th>
</tr>
</thead>
<tbody>
<tr>
<td>First Council of Nicaea</td>
<td>A.D. 325</td>
<td>Arianism</td>
<td>The Nicene Creed</td>
</tr>
<tr>
<td>Second Council of Nicaea</td>
<td>A.D. 787</td>
<td>Iconoclasm</td>
<td>Condemnation</td>
</tr>
<tr>
<td>The Council of Trent</td>
<td>A.D. 1545-63</td>
<td>Reformation</td>
<td>Catechism</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Council</th>
<th>Year</th>
<th>Heresy</th>
<th>Resolution</th>
</tr>
</tfoot>
</table>
</body>
</html>Output
Header Cell Scope
This example combines the elements of the previous tables and adds in the scope attribute to aid screen readers. The scope attribute is added to a header cell to specify to screen readers what is associated with the header cell: a column, a row, a group of columns, or a group of rows.
Example5.html
<!DOCTYPE html>
<html>
<head>
<title>XoaX.net HTML</title>
<style>
table, td, th {
border:1px solid black;
}
td,th {
padding: 10px;
}
</style>
</head>
<body>
<table>
<caption>Table Caption</caption>
<colgroup>
<col span="1">
</colgroup>
<colgroup>
<col span="3">
</colgroup>
<thead>
<tr>
<th scope="col">Head</th>
<th scope="col">1</th>
<th scope="col">2</th>
<th scope="col">3</th>
<th scope="colgroup" colspan="2">ab</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14a</td>
<td>14b</td>
</tr>
<tr>
<th scope="rowgroup" rowspan="2">xy</th>
<td>21x</td>
<td>22x</td>
<td>23x</td>
<td>24xa</td>
<td>24xb</td>
</tr>
<tr>
<td>21y</td>
<td>22y</td>
<td>23y</td>
<td>24ya</td>
<td>24yb</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Group 1</th>
<th colspan="3">Group 2</th>
<th colspan="2">Foot</th>
</tr>
</tfoot>
</table>
</body>
</html>Output
Output with Styling
© 2007–2024 XoaX.net LLC. All rights reserved.