HTML and CSS Reference
In-Depth Information
Adding Style to Table Elements
As discussed earlier, there are many ways to set the style (or appearance) of a Web page
element. You can use formatting tag attributes (e.g., setting the border in the <table> tag or setting
colspan in the <td> or <th> tag) to set the appearance or style. You can also use inline, embedded,
or external (linked) style sheets to set the style. During the design phase of the Web development
life cycle, you will determine how to set the styles for the elements on your Web pages.
HTML5 established a major change in how tables are formatted. All <table> tag
attributes (as indicated in Appendix A) have been eliminated in HTML5 except for the
border attribute. In this topic, you will utilize the new tags and properties available in
HTML5 when formatting tables. For instance, instead of using the cellspacing attribute,
which is not supported in HTML5, to increase the space between cells, you will use the
border-spacing property in an inline style. If you used the cellspacing attribute in your
HTML code and tried to validate the file using an HTML5 DOCTYPE, you would get
an error that said, “The cellspacing attribute on the table element is obsolete. Use CSS
instead.” In this topic we do not use any attributes that are unsupported in HTML5.
In addition, you will use a new CSS3 property to add a style to the banner image
used in this chapter project. The box-shadow property is a very exciting new addition with
CSS3 and can be used in a variety of ways. For this Web site, it gives the banner image a
very unique look as shown in Figure 4-1a on page HTML 155.
Figure 4-5a shows an example of a table of information in which no border has
been added. In Figure 4-5b, you see a table in which the border has been set to 1 pixel.
As you can see, just adding that one style has changed the table dramatically. Figure 4-5c
shows a table in which many styles were set to enhance the look of the table. By using a
combination of inline styles and an external style sheet, the table looks much more appeal-
ing and professional. In this chapter, you will use an external (linked) style sheet to set
styles for the tables across the entire Web site.
Table Elements
Many Web sources discuss
how to use and code
tables, giving numerous
examples and tips. For
more information about
HTML table parts, search
the Web for key terms
such as "HTML Table
Elements" or "HTML Table
(a) Table with
no border.
basic table with no
(default) border
border-width: 1px
added to <table> tag
(b) Table with one
pixel border.
table style enhanced by
many inline styles and
external style sheet
(c) Table with styles.
Figure 4-5
Search WWH ::

Custom Search