Chapter 8 Tables
While back in the day tables were often used to format the layout of a web page, CSS is the page layout tool of choice for modern web developers. In this chapter, you'll become familiar with coding HTML tables to organize information on a web page.
Focus on Web Design
Good artists view and analyze many paintings. Good writers read and evaluate many books. Similarly, good Web designers view and scrutinize many web pages. Explore the Web and find two web pages, one that is appealing to you and one that is unappealing to you. Review the pages and answer the following questions for each one.
- What is the URL of the website?
- Does this page use tables? If so, for what purpose—page layout, organization of information, or another reason?
- Does this page use CSS? If so, for what purpose—page layout, text and color configuration, or another reason?
- Is this page appealing or unappealing? List three reasons for your answer.
- If this page is unappealing, what would you do to improve it?
A Look Ahead to CSS "Tables"
if you'd like to explore using CSS to style table-like layouts on web pages, check out the CSS display property. As you may recall from previous chapters, the CSS display property configures whether and how an element is displayed. You've already worked with display: none, display: block, and display: inline.Rachel Andrew's article, "Everything You Know About CSS Is Wrong", encourages developers to embrace the display: table coding methods. Be aware that this technique is still quite limited. For example, there is no built-in mechanism to emulate the rowspan or colspan attribute in HTML tables. However, this is in the works with the CSS3 draft recommendation at http://www.w3.org/Style/CSS/current-work, which includes new CSS specifications for working with multicolumn layouts and grid positioning.
Review Activities
Review flash card activities are available for this chapter.
Check your knowledge of chapter terms and concepts.
Chapter Updates
- Page 353, Task 2, #5: Configure the even table rows with a light-blue background color (#F5FAFC).
- Page 354: Updated Figure 8.16
- Page 354, Task 2, #4 should be "No top margin for the paragraphs in the table"
Questions or Comments?
The author would like to hear from you! Send an e-mail to webdevfoundations@gmail.com