• Choose a category
• All
• Classic-Fiction

By Root 1413 0

the table header so when you discover formatting and decide to make all your table headers chartreuse, you’ll know where in the HTML code all the table headers are.

Indent your headers inside the set. If your table contains three columns, your first row might begin like this:

Place the text you want shown in the table headers between the and elements. The contents appear in the order they’re defined.

Headings don’t have to be on the top row. If you want headings on the left, just put a pair as the first element of each row. You can have headings at both the top and the left, if you want. In fact, you can have headings anywhere, but it usually makes sense to put headings only at the top or left.

Making your data rows

The next step is to create another row. The data rows are just like the heading row, except they use pairs, rather than pairs, to contain the data elements. Typically, a three-column table has blank rows that look like this:

Place the data elements inside the segments and you’re ready to go.

Building tables in the text editor

Some people think that tables are a good reason to use WYSIWYG (what you see is what you get) editors because they think it’s hard to create tables in text mode. You have to plan a little, but it’s really quite quick and easy to build an HTML table without graphical tools if you follow this plan:

1. Plan ahead.

Know how many rows and columns will be in the table. Sketch it on paper first might be helpful. Changing the number of rows later is easy, but changing the number of columns can be a real pain after some of the code has been written.

2. Create the headings.

If you’re going to start with a standard headings-on-top table, begin by creating the heading row. Save, check, and validate. You don’t want mistakes to multiply when you add more complexity. This heading row tells how many columns you’ll need.

3. Build a sample empty row.

Make a sample row with the correct number of td elements with one pair per line. Build one td set and use copy and paste to copy this data cell as many times as you need. Make sure the number of pairs equals the number of sets in the heading row.

4. Copy and paste the empty row to make as many rows as you need.

5. Save, view, and validate.

Be sure everything looks right and validates properly before you put a lot of effort into adding data.

6. Populate the table with the data you need.

Go row by row, adding the data between the pairs.

7. Test and validate again to make sure you didn’t accidentally break something.

Spanning rows and columns

Sometimes, you need a little more flexibility in your table design. Figure 4-7 shows a page from an evil overlord’s daily planner.

Figure 4-7: Some activities take up more than one cell.

Being an evil overlord is clearly a complex business. From a code standpoint, the items that take up more than one cell are the most interesting. Designing traps takes two mornings, and improving the lair takes three. All Friday afternoon and evening are spent on world domination. Take a look at the code, and you’ll see how it works:

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

Using colspan and rowspan

My Schedule

	Monday	Tuesday	Wednesday	Thursday	Friday
Breakfast	In lair	with cronies	In lair	in lair	in lair
Morning	Design traps	Improve Return Main Page Previous Page Next Page ®Online Book Reader