HTML and CSS Reference
In-Depth Information
HTML tables are used to structure tabular data.
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.
Use the HTML table elements <table>, <tr>,
<th>, and <td> together to create a table.
The <table> element defines and surrounds
the entire table.
Use the CSS nth-child pseudo-class to add
background color to every other row of a table.
Tables are defined in rows, using the <tr>
element.
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.
Each row contains one or more data cells,
defined with the <td> element.
Use the <th> element for data cells that are
row or column headings.
If your data cell needs to span multiple rows or
columns, you can use the rowspan or colspan
attributes of the <td> element.
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 nest tables within tables by placing
the <table> element and all its content inside a
data cell.
You can provide additional information about
your tables with the <caption> element.
Tables should be used for tabular data, not for
laying out your pages. Use CSS table display
to create multicolumn page layouts as we
described in Chapter 11.
Tables have border-spacing, which is the
space between cells.
Lists can be styled with CSS just like any other
element. There are a few CSS properties
specific to lists, such as list-style-type and
list-style-image.
Table data cells can also have padding and
borders.
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.
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.
border-collapse 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.
