Online Book Reader

Home Category

HTML, XHTML and CSS All-In-One for Dummies - Andy Harris [37]

By Root 1383 0
world.

As you can see, the definition list uses three tag pairs:

defines the entire list.

defines each definition term.

defines the definition data.

Definition lists aren’t used often, but they can be extremely useful. Any time you have a list that will be a combination of terms and values, a definition list is a good choice.


Building Tables

Sometimes, you’ll encounter data that fits best in a tabular format. XHTML supports several table tags for this kind of work. Figure 4-5 illustrates a very basic table.

Figure 4-5: Tables are useful for some data representa-tion.

Sometimes, the best way to show data in a meaningful way is to organize it in a table. XHTML defines a table with the (cleverly named) tag. The table contains a number of table rows (defined with the tag). Each table row can consist of a number of table data (
) or table header () tags.

Compare the output in Figure 4-5 with the code for basicTable.html that creates it:

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

basicTable.html

A Basic Table

XHTML Super Heroes

HeroPowerNemesis
The XMLatorStandards complianceSloppy Code Boy
Captain CSSSuper-layoutLord Deprecated
Browser WomanMega-CompatibilityUgly Code Monster


Defining the table

The XHTML table is defined with the
pair. It makes a lot of sense to indent and space your code carefully so you can see the structure of the table in the code. Just by glancing at the code, you can guess that the table consists of three rows and each row consists of three elements.

In a word processor, you typically create a blank table by defining the number of rows and columns, and then fill it in. In XHTML, you define the table row by row, and the elements in each row determine the number of columns. It’s up to you to make sure each row has the same number of elements.

By default (in most browsers, anyway), tables don’t show their borders. If you want to see basic table borders, you can turn on the table’s border attribute. (An attribute is a special modifier you can attach to some tags.)

This tag creates a table and specifies that it will have a border of size 1. If you leave out the border = “1” business, some browsers display a border and some don’t. You can set the border value to 0 or to a larger number. The larger number makes a bigger border, as shown in Figure 4-6.

Although this method of making table borders is perfectly fine, I show a much more flexible and powerful technique in Book II, Chapter 4.

Figure 4-6:

I set the border attribute to 10.

Setting a table border is a good idea because you can’t count on browsers to have the same default. Additionally, the border value is always in quotes. When you read about CSS in Book II (are you getting tired of hearing that?), you discover how to add more complex and interesting borders than this simple attribute allows.


Adding your first row

After you define a table, you need to add some rows. Each row is indicated by a

pair.

Inside the

set, you need some table data. The first row often consists of table headers. These special cells are formatted differently to indicate that they’re labels, rather than data.

Table headers have some default formatting to help you remember they’re headers, but you can change the way they look. You can change the table header’s appearance in all kinds of great ways in Books II and III. Define

®Online Book Reader