Part III: Taking Precise Control Over Web Pages in Java

Drawer Code 3/9 in Java Part III: Taking Precise Control Over Web Pages

Although tables were invented to contain and display data, they re now most commonly used to control Web page layout This chapter focuses on the elements that designers use to control layout If you want to create a traditional table, you can use these table elements:

data The <tbody> element must contain at least one table row (<tr>)

<thead>: You can group table rows into a table head section by using the table head (<thead>) element The table head contains information about the table s columns

<tfoot>: Much like the <thead> ele-

You can use the <th> element within any row of a table, but you most often find and use it in the first row at the top or head of a table Except for their position and egotism, they act just like table data (<td>) tags and should be treated as such

<caption>: This is the table caption element It is designed to exist anywhere inside the <table> </table> tags but not inside table rows or cells (because then they wouldn t be captioning anything) This element can only occur once per table

ment, you can group table rows into a table footer section by using the table footer (<tfoot>) element The table footer contains information about the table s columns and must contain at least one table row Include your footer information before the first instance of the <tbody> element so that the browser renders that information before taking a stab at all the content data cells

Similar to table cells, captions accommodate any HTML elements that can appear in the body of a document (in other words, inline elements), but only those By default, captions are horizontally centered with the table, and their lines wrap to fit within the table s width The <caption> element accepts the align attribute

explicit column group You specify the number of columns by using the span attribute or by using the <col> element, which we define shortly You use the span attribute to specify a uniform width for a group of columns

<col>: The <col> element is an empty element You use the <col> element to further define column structure The <col> element shouldn t be used to group columns that s the <colgroup> element s job You use the <col> element after you define a column group and set a uniform width to specify a uniform width for a subset of columns

A recent addition to the HTML 4 specification, these elements allow table bodies to scroll independently of the table head (<thead>) and table foot (<tfoot>) The table body should contain rows of 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 cell will span more than one row or column (such as the first cell in the preceding example), you have to add an attribute that tells the browser which cell does the spanning The number in the attribute corresponds to 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, Adding Spans, later in this chapter for more information But for now, assume 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 white space within your table (For example, without borders, you can t really tell the table is there it won t show up in your browser This isn t a bad thing or a good thing, but something that you can change if you want your borders to show up in browsers) Keep reading for more information on completing your table and integrating it into your page