ptg16476052280 LESSON 10: Building Tables
Input ▼
<table border="1" style="width: 100%;">
<caption style="font-weight: bold;">Science and Mathematic Class Schedules
</caption>
<colgroup style="width: 20%; text-align:center; vertical-align: top;">
<colgroup span="2" style="width: 40%; vertical-align: top;">
<thead style="background-color: red;">
<tr>
<th>Class</th>
<th>Room</th>
<th>Time</th>
</tr>
</thead >The <tfoot>...</tfoot> element defines the footer of the table. The starting <tfoot>
tag is always required when defining the footer of a table. The closing <tfoot> tag is
optional. The footer of the table can appear immediately after the table heading if one is
present, or after the <table> element if a table heading isn’t present or after the <tbody>
element. It must contain at least one row group, defined by the <tr> element. A good
example of information that you could place in a table footer is a row that totals columns
of numbers in a table.
You usually define the footer of the table before the table body because the browser has
to render the footer before it receives all the data in the table body. For the purposes of
this example, we’ll include the same information in the table head and the table footer.
The code looks like this :Input ▼
<tfoot style="background-color: blue;">
<tr>
<th>Class</th>
<th>Room</th>
<th>Time</th>
</tr>
</tfoot>After you define the heading and footer for the table, you define the rows in the table
body. A table can contain more than one body element, and each body can contain one or
more rows of data. This might not seem to make sense, but using multiple body sections
enables you to divide up your table into logical sections. I show you one example of why
this is rather cool in a little bit.