tables and more lists
you are here
XHTML tables are used
to structure tabular
Use the HTML table elements, <table>, <tr>,
<th>, and <td> together to create a table.
The <table> element deﬁnes and surrounds
the entire table.
Tables are deﬁned in rows, using the <tr>
Each row contains one or more data cells,
deﬁned with the <td> element.
Use the <th> element for data cells that are
row or column headings.
Tables are laid out in a grid. Each row
corresponds to a <tr>...</tr> row in your
HTML, and each column corresponds to the
<td>...</td> content within the rows.
You can provide additional information about
your tables with the table summary attribute,
and the <caption> element.
Table data cells can have padding, borders,
and border spacing, which is the space
Just like you can control the padding, borders,
and margins of elements, you can control the
padding, borders, and border spacing of table
cells with CSS.
The border-collapse property is a special CSS
property for tables that allows you to combine
cell borders into one border for a cleaner look.
You can change the alignment of the data in
your table cells with the text-align and vertical-
align CSS properties.
You can add color to your tables with the
background-color property. Background color
can be added to the entire table, to each row,
or to a single data cell.
If you have no data for a data cell, put no
content into the <td> element. You need to
use a <td>...</td> element to maintain the
alignment of the table, however.
If your data cell needs to span multiple rows or
columns, you can use the rowspan or colspan
attributes of the <td> element.
You can nest tables within tables by placing
the <table> element and all its content inside
a data cell.
Tables should be used for tabular data, not for
laying out your pages. Use CSS positioning
to create multi-column page layouts as we
described in Chapter 12.
Lists can be styled with CSS just like
any other element. There are a few CSS
properties speciﬁc to lists, such as list-style-
type and list-style-image.
list-style-type allows you to change the type of
the marker used in your list.
list-style-image allows you to specify an image
for your list marker.