Building a table
You??™re now going to build a table, taking into account all of the information mentioned so
far. This will be based on an iTunes playlist.
You can instead use the axis attribute to categorize groups of header cells (or data
cells), using code such as
. This helps imply the relationship
between groups of headers via the markup, further benefiting screen reader
users. This can be particularly useful when an extra header row defining those categories
hasn??™t been used as it is in the previous code block (i.e., if the fruit and vegetable
headings were omitted).
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN
242
As you can see from the screenshot, the playlist lends itself well to being converted to an
HTML table. At the top is the table head, which details each column??™s data type (song
name, time, etc.). And although there??™s no table foot, you can simply add some information
regarding whose choice of music this is??”something of a signature??”although the
table foot can also be used to provide a succinct summary of the table??™s contents, akin to
the value of the summary attribute discussed earlier.
Required files XHTML-basic.html from the basic-boilerplates folder as a
starting point, along with building-the-table-body.txt from
the chapter 6 folder.
What you??™ll learn How to create a table.
Completed files building-the-table.html in the chapter 6 folder.
1. Structure the table element.
Pages:
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
|