HTML and CSS Reference
In-Depth Information
< th > Row 2
< td > data x
< td > data y
< td > data z
</ table >
</ body >
</ html >
One of the more interesting aspects of the table tags is that the closing tags are optional. No
best practice suggests that closing tags be used or not. Formatting the code so that the rows
are clearly delineated is important for making sense out of what you see. By not including the
table cell closing tags, the code seems to be a lot clearer and less cluttered, and that's a good
thing. So, the closing cell tags are going to be let out unless putting one in will help clarify
what's going on in the listing. Figure 6-2 shows what you'll see when you launch the i le in a
browser.
114
Figure 6-2: A basic table.
Notice that while the <th> tags cause the text to be shown in boldface that the table
<caption> does not. h at can be i xed with CSS3, and so can the rest of the table to make
it more useful. However, to get started with tables, all you need to understand are the basics.
STYLING A TABLE
You don't use tables for general styling work, but that doesn't mean that you can ignore the
style of the table itself. h e good news in HTML5 is that borders on tables are not a default
state as they had been in previous versions of HTML. In fact, the table border attribute is no
longer supported in HTML5. If you want lines around the cells, you have to take that respon-
sibility yourself and add them using CSS3. Borders around cells or anything else must be done
judiciously or (in the opinion of many designers) not at all.
ADDING BORDERS WITH CSS3
h e renowned information-design thinker Edward Tut e cautions that borders can clutter up
the background so much that the data are dii cult to read and understand. Although borders
clearly separate tabular data, visible borders muddy the waters between the data, making each
 
Search WWH ::




Custom Search