Constructing Basic Tables - Wiley Publishing For Dummies HTML for Dummies, pdf

After you complete a sketch that gives a pretty solid indication of the page and table layout, open your HTML editor and create the skeleton of your table. The building blocks for that framework are the three basic components of any table:

Table:<table> Table row:<tr> Table (data) cell:<td>

Remember A hierarchy defines the nesting order of table elements: A <td> is always enclosed within a

<tr>, which is always enclosed within a <table>.

With these three elements alone, you're ready to build a simple table; the markup that does the job looks something like this:

In our example, we create a table with two rows based on the sketch in Figure 8-4. The first table row encloses cells 1 and 2; the second table row encloses cells 3 and 4.

Remember Table rows always run horizontally and the contents of each cell - in this case, cell 1,

cell 2, and so on - are contained within their own <td> element.

To create the shell of your table-based Web page (for example, one based on the sketch from the

previous section, Figure 8-4), you start with the <table> element:

The <table> element can have a number of optional attributes (for example, border="1" or

bgcolor="black") - for now, however, keep it simple. Next, decide how many rows you want the table to have:

<table>

Figure 8-5 shows the type of table this markup generates: a simple table with two rows. Each <tr> tag pair represents a single row.

HTML 4 for Dummies, 4th Edition

Whether your goal is to build a simple, text-oriented Web site or one loaded with frames, graphics, and animation, this step- by-step book will put you on the right track.

Table of Contents

HTML 4 For Dummies, 4th Edition Introduction

Part I - Meeting HTML in Its Natural Environment

Chapter 1 - The Least You Need to Know about HTML and the Web Chapter 2 - HTML at Work on the Web

Chapter 3 - Creating Your First HTML Page Part II - Getting Started with HTML

Chapter 4 - Structuring Your HTML Documents Chapter 5 - Linking to Online Resources Chapter 6 - Finding and Using Images

Chapter 7 - Top Off Your Page with Formatting Part III - Taking HTML to the Next Level

Chapter 8 - HTML Tables Chapter 9 - HTML Frames Chapter 10 - HTML Forms

Part IV - Extending HTML with Other Technologies Chapter 11 - Getting Stylish with CSS

Chapter 12 - HTML and Scripting Chapter 13 - Making Multimedia Magic

Chapter 14 - Integrating a Database into Your HTML Chapter 15 - How HTML Relates to Other Markup Languages Part V - From Web Page to Web Site

Chapter 16 - Creating an HTML Toolbox Chapter 17 - Setting Up Your Online Presence Chapter 18 - Creating a Great User Interface Part VI - The Part of Tens

Chapter 19 - Ten Ways to Exterminate Web Bugs Chapter 20 - Ten HTML Do’s and Don’ts

Part VII - Appendixes Appendix A - HTML 4 Tags

Appendix B - HTML Character Codes Appendix C - Glossary

Index

Cheat Sheet- HTML 4 For Dummies, 4th Edition List of Figures

List of Tables List of Listings List of Sidebars

Figure 8-5: The beginning og the table structure contains only two rows.

After you enter the appropriate number of rows, you add cells using the table data cell (<td>) element. The <td> element defines the number of cells - and, therefore, the number of columns.

The sketch in Figure 8-4 shows a two-column table with three cells, the first row contains one cell, and the second row contains two cells. The markup for this arrangement looks like this:

<table> <tr> <td> contents </td> </tr> <tr> <td> contents </td> <td> contents </td> </tr> </table>

Here's where tables can get a bit tricky. A simple table with an even number of rows and columns (say two rows and two columns) is a piece of cake - but you'll discover as you get more handy at designing your own pages that your needs aren't likely to produce such symmetrical tables very often. If your table will span more than one row or column (such as the first cell in the preceding example), you'll have to add an attribute that tells the browser which cell does the spanning.

The number in the attribute corresponds with the number of columns or rows you want the cell to span, which means if you're creating a table like the one in our example, you have to add the colspan="2"

attribute to the first <td> element. (The first cell in the table spans across two columns.)

See the section later in this chapter, 'Adding Spans,' for more information, but for now, assuming that you're creating a table like ours, the markup looks like this:

<table> <tr> <td colspan="2"> contents </td> </tr> <tr> <td> contents </td> <td> contents </td> </tr> </table>

Congratulations, you're done with your first table. Well, sort of. To effectively use tables for layout, you need to know how to control several display issues, such as borders, table widths, and the handling of