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