Sams Teach Yourself HTML 4 in 24 Hours

By Dick Oliver

• Table of Contents
  • Copyright
  • About the Author
  • Acknowledgments
  • Tell Us What You Think!
  • Put Your HTML Page Online Today
  • I. Your First Web Page
  • Hour 1. Understanding HTML and XML
  • Hour 2. Create a Web Page Right Now
  • Hour 3. Linking to Other Web Pages
  • Hour 4. Publishing Your HTML Pages
  • II. Web Page Text
  • Hour 5. Text Alignment and Lists
  • Hour 6. Text Formatting and Font Control
  • Hour 7. Email Links and Links Within a Page
  • Hour 8. Creating HTML Forms
  • III. Web Page Graphics
  • Hour 9. Creating Your Own Web Page Graphics
  • Hour 10. Putting Graphics on a Web Page
  • Hour 11. Custom Backgrounds and Colors
  • Hour 12. Creating Animated Graphics
  • IV. Web Page Design
  • Hour 13. Page Design and Layout
  • Hour 14. Graphical Links and Imagemaps
  • Hour 15. Advanced Layout with Tables
    • Creating a Simple Table
    • Table Size
    • Alignment and Spanning
    • Backgrounds and Spacing
    • Creative Page Layout with Tables
    • Summary
    • Q&A
    • Workshop
  • Hour 16. Using Style Sheets
  • V. Dynamic Web Pages
  • Hour 17. Embedding Multimedia in Web Pages
  • Hour 18. Interactive Pages with Applets and ActiveX
  • Hour 19. Web Page Scripting for Non-Programmers
  • Hour 20. Setting Pages in Motion with Dynamic HTML
  • VI. Building a Web Site
  • Hour 21. Multipage Layout with Frames
  • Hour 22. Organizing and Managing a Web Site
  • Hour 23. Helping People Find Your Web Pages
  • Hour 24. Planning for the Future of HTML
  • VII. Appendixes
  • A. Readers' Most Frequently Asked Questions
  • B. HTML Learning Resources on the Internet
  • C. Complete HTML 4 Quick Reference
  • D. HTML Character Entities

Creating a Simple Table

To make tables, you have to start with a <table> tag. Of course, you end your tables with the </table> tag. If you want the table to have a border, use a border attribute to specify the width of the border in pixels. A border size of 0 (or leaving the border attribute out entirely) will make the border invisible, which is often handy when you are using a table as a page layout tool.

With the <table> tag in place, the next thing you need is the <tr> tag. <tr> creates a table row, which contains one or more cells of information before the closing </tr>. To create these individual cells, you use the <td> tag. <td> stands for table data; you place the table information between the <td> and </td> tags.

A cell is a rectangular region that can contain any text, images, and HTML tags. Each row in a table is made up of at least one cell.

There is one more basic tag involved in building tables: The <th> tag works exactly like a <td> tag, except <th> indicates that the cell is part of the heading of the table. Some Web browsers render <th> and <td> cells exactly the same, but Netscape Navigator and Microsoft Internet Explorer (version 4 or greater) both display the text in <th> cells as centered and boldface.

You can create as many cells as you want, but each row in a table should have the same number of columns as the other rows. The example in Figures 15.1 and 15.2 shows a simple table using only these four tags.

Figure 15.1 The <table>, <tr>, and <td> tags are all you need to create simple tables. The <th> tag can also be used to specify a heading.

Figure 15.2 The HTML in Figure 15.1 creates a table with four rows and three columns.

You can place virtually any other HTML element into a table cell. However, tags used in one cell don't carry over to other cells, and tags from outside the table don't apply within the table. For example, if you wrote the following, the word there would be neither boldface nor italic because neither the <b> tag outside the table nor the <i> tag from the previous cell affects it:

<b>
<table><tr>
 <td><i>hello</td>
 <td>there</td>
</tr></table>
</b>

To make both the words hello and there boldface, you would need to type this:

<table><tr>
 <td><b>hello</b></td>
 <td><b>there</b></td>
</tr></table>

Share This