Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

(Nora) #1

Lesson 2: Working with tables CHAPTER 5 241


text-align: right;
}

th {
border: thin solid #000000;
}

.hidden {
display: none;
}

.visible {
display: normal;
}
The results are displayed in Figure 5-16.

FIGURE 5-16 he rendered page with borders set, clearly showing the rowspan and colspan attributesT

Adding a caption to a table


You can use the <caption> element to define and associate a caption with a table. The default
style of the caption is centered and located above the table. You can use the CSS text-align
and caption-side properties to override the default style. If you use the <caption> element, it
must be the first element within the <table> element.

Styling columns


Styling columns is a common difficulty because tables are row-centric, not column-centric.
It’s relatively easy to apply a style to a row because you can apply a <tr> element to the style,
but there isn’t a <tc> element for a column. Remember that the <td> element represents a
cell, not a column. Columns are actually created implicitly by creating the cells. Use the <col-
group> and <col> elements to style columns.
The <colgroup> element is placed inside the <table> element to define columns that can
be styled. Remember that styling includes hiding and displaying the columns. Inside the
Free download pdf