HTML and CSS Reference
In-Depth Information
by setting the border to 1, the
table will display with borders
(a) HTML table
tags.
start table <table>
start table row
end table
heading cell
start table
heading cell
table
header
row
5 pixels of space
added between
and within cells
table data row
end table row
start table data cell
table data row
table data row
end table </table>
end table
data cell
heading cells;
bold and centered
data cells; normal
and left-aligned
(b) Resulting table in Web page.
Figure 4-10
table in Figure 4-10b has a border, and using inline styles, the border-spacing and pad-
ding was set to 5 pixels each to highlight further differences between the cells. You will
learn about border-spacing and padding styles later in the chapter.
Table Tag Attributes
Prior to HTML5, the four table tags had many attributes that could be used to
format tables. These attributes are all shown in Appendix A. However, HTML5 does not
support most of those attributes, and it is recommended that you use Cascading Style
Sheets to style tables in a Web page. With HTML5:
the <table> tag only allows the use of the border attribute
Table Borders
Table borders can be
used to frame an image.
You can insert a single
image into a one-row,
one-column table. Using a
border gives the image a
3-D appearance, making
the image appear to
have a frame around it.
The border attribute can
have a value of "1" or
" " only. You can also use
CSS border properties to
define borders.
•
the <tr> tag has no attributes still in use
•
the <th> and <td> tags still allow use of the rowspan, colspan, and headers attributes
•
Table 4-2 lists the CSS properties and values that can be used to style tables. You
use the border-spacing property in this chapter project to create more space between
borders in the table. Many other styles are added to style the tables in the Web site in this
chapter by using a combination of HTML5 supported attributes along with inline styles
and an external style sheet.
