Web design creating cool web sites with html, xhtml, and css

Page 207

180

Creating Cool Web Sites with HTML, XHTML, and CSS

The other interesting thing about this example is that I’m specifying that I want to have the second column of information aligned by the colon (:) character in the data cell contents. The attribute align=”char” specifies a character alignment, and char is where you specify which character to use for alignment. If you don’t specify a char value, the default is ‘.’, which aligns numeric values along the decimal point.

tip

Alas, character alignment isn’t supported in Internet Explorer 6.0, so Figure 8-15 doesn’t show the times aligned along the colons. It’ll just magically work one day, I expect.

Another possible align option (and, like the align=”char” option, it can appear anywhere you can specify an alignment) that you might well have been waiting for since the first release of HTML has arrived: justified text. The align=”justify” attribute should eliminate the ragged right margin of text, while keeping the left margin also aligned. This attribute can also be used with the p or div tag, as discussed earlier in the book. Consider this HTML sequence: <p align=”justify”>

While the rain slowly poured down the

rooftops in Spain, the same storm was dumping water in

Paris too, pooling at the edge of the buildings and

seeping slowly into the Seine. Tintin, our hero, was

undaunted. He held his

chin high and walked quietly along the Rue Sienna, looking

for his beloved dog.

</p>

<table border=”1” cellpadding=”5”>

<col align=”justify” /><tr><td>

Just when he was beginning

to give up hope, a small “yip” from a dark alleyway caused

Tintin to spin about and yell out “Snowy? Come on, boy!”

Within moments, there was a happy reunion in the rain

between the boy reporter and his faithful - but ever-

curious - pet.

</td></tr>

</table>

Now look at how it all formats in Figure 8-16. As you can see, justification is implemented within the p tag in this version of Internet Explorer, but justification within the data cell is ignored.

tip

Dying for that visual justified effect? Just wrap the table data cell in <p

align=”justify”> and you achieve the results desired.


Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.