Scribd
Upload
32 views

Chapter 08 - Tables

Tables are used to display tabular data arranged into rows and columns. The <table> element contains <tr> rows which contain <td> or <th> cells. <th> is for table headings while <td> is for data. Additional semantic elements like <thead>, <tbody>, <tfoot> can be used to specify header, body, and footer sections. Cells can span multiple rows or columns using colspan or rowspan attributes. Cell padding and spacing controls spacing. The scope and headers attributes help associate cells with headers for accessibility.

Uploaded by

ryuu.ducat
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
32 views

Chapter 08 - Tables

Tables are used to display tabular data arranged into rows and columns. The <table> element contains <tr> rows which contain <td> or <th> cells. <th> is for table headings while <td> is for data. Additional semantic elements like <thead>, <tbody>, <tfoot> can be used to specify header, body, and footer sections. Cells can span multiple rows or columns using colspan or rowspan attributes. Cell padding and spacing controls spacing. The scope and headers attributes help associate cells with headers for accessibility.

Uploaded by

ryuu.ducat
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

Tables

Web development I: Front-end engineering


How tables are used

Tables are for tabular data

● Cells arranged into rows and columns


Basic markup

See <th> (table heading), <tr> (table row), <td> (table data)
Semantic markup

<table> The table element

<caption> Table caption: describe content

<colgroup> Group of columns

<col> Column description

<thead> Table header: column names

<tbody> Table body: primary content

<tfoot> Table footer: secondary content


Spanning cells

<table>

<tr>

<th colspan="2">Fat</th>

</tr>

<tr>

<td>Saturated Fat (g)</td>

<td>Unsaturated Fat (g)</td>

</tr>

</table>
Spanning cells

<table>

<tr>

<th rowspan="3">Serving Size</th>

<td>Small (8oz.)</td>

</tr>

<tr>

<td>Medium (16oz.)</td>

</tr>

<tr>

<td>Large (24oz.)</td>

</tr>

</table>
Space in and between cells

Cell padding Cell spacing


Connecting cells and headers

Scope Headers

<tr> <tr>

<th scope="row">Mars</th> <th id="diam">Diameter (in cm)</th>

<td>.95</td> …

<td>.62</td> <td headers="diam">.38</td>

<td>0</td> </tr>

</tr>

Both are extremely useful for accessibility reasons

You might also like