The Structure of a Web Table

beginning of the table structure first row of three in the table end of the table structure

…	…
…	…
…	…

table cells You do not need to indent the tags or place them on separate lines, but you may find it easier to interpret your code if you do so.

After the table structure is in place, you’re ready to add the text for each cell.

1

two rows

Example: A Simple 2x2 Table

two columns

First Cell Second Cell Third Cell Fourth Cell

2

Adding Table Headings with the Tag Text in cells formatted with the tag is bold and centered above each table column.

Row of table headings

3

Result of Table Headings as Displayed in the Browser table headings appear bold and centered over their columns

4

Creating a Table Caption

• The syntax for creating a caption is:

caption text

where

alignment

indicates the caption placement – a value of

bottom

centers the caption below the table – a value of

top

table – a value of

left

or

center

or

right

centers the caption above the place the caption above the table to the left or right 5

Inserting a Table Caption

caption text caption will be centered above the table table caption

6

Marking Row Groups in a Table

• You can divide a table’s rows into

row groups

, in which each group element contains different types of content and can be formatted differently

0 or 1 of these 0 or 1 of these 0 or more of these. They are listed last (after the tfoot element)

Marking Column Groups in a Table

• Once the table columns have been determined by the browser, you can reference them through the use of

column groups

…

Implies there are 7 columns in this table.

Adding a Table Border

• By default, browsers display tables without table borders • The syntax for creating a table border is:

…

where

value

is the width of the border in pixels 9

Adding a 5-Pixel Border to a Table

Only the outside border is affected by the border attribute; the internal gridlines are not affected

10

Adding a Table Summary

• The

summary

attribute allows you to include a more detailed description about the table

>

Adding Space Between Table Cells

• The

cell spacing

attribute controls the amount of space inserted between table cells • The syntax for specifying the cell space is:

–

value

is the width of the interior borders in pixels – the default cell spacing is 2 pixels 12

Example: Setting the Cell Spacing to 0 Pixels Setting the cell spacing to 0 reduces the width of the borders between individual table cells. This will not remove the border between the cells.

13

Adding Space Within a Cell

• To control the space between the table text and the cell borders, add the

cell padding

attribute to the table tag • The syntax for this attribute is:

–

value

is the distance from the table text to the cell border, as measured in pixels – the default cell padding value is 1 pixel 14

Example: Setting the Cell Padding to 4 Pixels A table with an increased amount of cell padding.

By increasing the cell padding, you added space inside the table.

15

Defining the Table Size

• The syntax for specifying the table size is:

where

size

is the width and height of the table as measured in pixels or as a percentage of the display area • If you specify an absolute size for a table in pixels, its size remains constant, regardless of the browser or monitor settings used 16

Example: Setting the Width of the Table to 70% of the Page Width

17

Setting Cell and Column Sizes Horizontally

• To set the width of an individual cell, add the

width

attribute to either the

or	tags • The syntax is: width=“value” – value can be expressed either in pixels or as a percentage of the table width – a width value of 30% displays a cell that is 30% of the total width of the table 18 Setting Cell and Column Sizes Vertically • The height	attribute can be used in the	tags to set the height of individual cells or • The height attribute is expressed either in pixels or as a percentage of the height of the table • If you include more text than can be displayed within that height value you specify, the cell expands to display the additional text 19 Specifying Which Sides of the Table Have Borders A table frame specifies which sides of the table have borders Specifying Which Internal Gridlines of the Table Are Drawn • A table rule specifies how the internal gridlines are drawn within the table Spanning Rows and Columns • To merge several cells into one, you need to create a spanning cell • A spanning cell is a cell that occupies more than one row or column in a table • Spanning cells are created by inserting the rowspan and colspan attribute in a – value is the number of rows or columns that the cell spans in the table 22 This cell spans two columns and two rows This cell spans three rows Example of Spanning Cells This cell spans three columns 23 A Table Structure with a Row-Spanning Cell four table cells in the first row only three table cells are required for the second and third rows HTML code resulting table 24 Horizontally Aligning a Table on the Web Page • To align a table with the surrounding text, use the align attribute as follows: align=“alignment” – alignment equals left, right, or center – left or right alignment places the table on the margin of the Web page and wraps surrounding text to the side – center alignment places the table in the horizontal center of the page, but does not allow text to wrap around it • The align attribute is similar to the align attribute used with the tag 25 Aligning the Cell Contents of a Table • By default, cell text is placed in the middle of the cell, aligned with the cell’s left edge • By using the align and valign attributes, you can specify the text’s horizontal and vertical placement • To align the text for a single column, you must apply the align attribute to every cell in that column 26 Values of the align and valign Attributes 27 You Can Color Rows or Individual Cells of the Table 28 Applying a Background Image to a Table, Row, or Cell parch.jpg or tag. • The syntax for these attributes is: … 29 Formatting Tables with CSS • Starting with CSS2, Cascading Style Sheets included support for Web tables. For example, HTML file : CSS file : table.schedule td {border:10px solid gray} • To avoid confusion, it’s best to style tables either inline or using CSS but not mix the two approaches Precedence Rules in Formatting Tables with CSS Using Tables for Layout • HTML tables are often used to define the layout of an entire Web page • If you want to design a page that displays text in newspaper style columns, or separates the page into distinct sections, you’ll find tables an essential and useful tool 32 Creating a Newspaper-Style Layout With Nested Tables 33 Are Table Layouts Really a Good Idea? • Table layouts are not in the spirit of HTML • Table layouts are difficult to revise • Tables take longer to render • Tables can be code-heavy • Tables can be inaccessible to users with disabilities Directory ×