Chapter 5

Working with Tables

Agenda• Add a Table • Assign a Table Border • Adjust Cell Padding and Spacing

• Adjust Cell Width and Height

• Add Column Labels • Create Newspaper-Style Columns

• Create Side Navigation • Add a Table Caption • Control which Borders to Display

• Adjust the Table Size • Change Cell Alignment

• Extend Cells across Columns and Rows

• Create Column and Row Groups

• Add a Background Color to Cells

• Add a Background Color to a Table

• Insert an Image in a Cell

• Insert a Background Image

• Change Table Alignment

• Control Text Wrapping in Cells

• Nest a Table within a Table

Why TablesHTML tables enable you to effectively present large amounts of data in rows and columns.You can also use tables to organize the overall structure of a Web page.For example, you can create a two-column tablethat organizes a list of navigational links in one column and the main text and image content in another.

Tables properties

Tables properties

Add Table• The <table> tag defines an HTML table.• An HTML table consists of the <table> element

and one or more <tr>, <th>, and <td> elements.• The <tr> element defines a table row, the <th>

element defines a table header, and the < td> element defines a table cell.

• A more complex HTML table may also include <caption>, <col>, <colgroup>, <thead>, < tfoot>, and <tbody> elements.

Example of Table<table border="1">

<tr><th>Month</th><th>Savings</th>

</tr><tr>

<td>January</td><td>$100</td>

</tr></table>

Table AttributesAttribute Value Description

alignleftcenterright

Not supported in HTML5. Deprecated in HTML 4.01. Specifies the alignment of a table according to surrounding text

bgcolorrgb(x,x,x)#xxxxxxcolorname

Not supported in HTML5. Deprecated in HTML 4.01. Specifies the background color for a table

border 1"" Specifies whether the table cells should have borders or not

cellpadding pixels Not supported in HTML5. Specifies the space between the cell wall and the cell content

cellspacing pixels Not supported in HTML5. Specifies the space between cells

frame

voidabovebelowhsideslhsrhsvsidesboxborder

Not supported in HTML5. Specifies which parts of the outside borders that should be visible

rules

nonegroupsrowscolsall

Not supported in HTML5. Specifies which parts of the inside borders that should be visible

summary text Not supported in HTML5. Specifies a summary of the content of a table

width pixels% Not supported in HTML5. Specifies the width of a table

Rows AttributesAttribute Value Description

align

rightleftcenterjustifychar

Not supported in HTML5. Aligns the content in a table row

bgcolorrgb(x,x,x)#xxxxxxcolorname

Not supported in HTML5. Deprecated in HTML 4.01. Specifies a background color for a table row

char character Not supported in HTML5. Aligns the content in a table row to a character

charoff numberNot supported in HTML5. Sets the number of characters the content will be aligned from the character specified by the char attribute

valigntopmiddlebottombaseline

Not supported

Cells AttributesAttribute Value Description

align

leftrightcenterjustifychar

Aligns the content in a cell

bgcolorrgb(x,x,x)#xxxxxxcolorname

Specifies the background color of a cell

colspan number Specifies the number of columns a cell should span

headers header_id Specifies one or more header cells a cell is related to

height pixels% Sets the height of a cell

nowrap nowrap Specifies that the content inside a cell should not wrap

rowspan number Sets the number of rows a cell should span

scopecolcolgrouprowrowgroup

Defines a way to associate header cells and data cells in a table

valigntopmiddlebottombaseline

Vertical aligns the content in a cell

width pixels% Specifies the width of a cell

Create Newspaper-Style Columns

• Within the <TR> and </TR> tags, type <TD VALIGN=”top”> to start the first column of text.

• to create a basic table. You can optionally specify a WIDTH attribute to constrain a column’s width.

• Type your column text.• Type </TD> at the end of the text.• Repeat the previous steps to add more columns

and text.• The Web browser displays the text as columns on

the page.

Create Side Navigation

• Start your table by typing <TABLE> and <TR> tags.• Type <TD VALIGN=”top” WIDTH=”?”>, replacing ? With the pixel

value or percentage value you want to assign for the navigation column.

• Type your navigation links. You can use the <BR> tag to put links on different lines.

• Type </TD> at the end of the link text.• Type <TD VALIGN=”top” WIDTH=”?”>, replacing ? With the pixel

value or percentage value you want to assign for the main content column.

• Type your main content.• Type </TD>, </TR>, and then </TABLE> to close the table.• When the table displays in a browser, the links appear to the left

of the main content.

Add a Table Caption • Add a new line directly below the <TABLE> tag.• Type <CAPTION>.• To place the caption below the table, type

ALIGN=”bottom” within the <CAPTION> tag.• Type the caption text.• Type </CAPTION> at the end of the caption text.• The Web browser displays the caption above or

below the table.

Extend Cells across Columns and Rows

• Click inside the tag for the cell you want to extend across columns.

• Type COLSPAN=”?”, replacing ? with the number of columns you want to span.

• The Web browser displays the cell spanning the designated number of columns.

• In this example, a heading column spans the top of the table.

Create Column Groups • The <colgroup> tag specifies a group of one or

more columns in a table for formatting.• The <colgroup> tag is useful for applying styles to

entire columns, instead of repeating the styles for each cell, for each row.

• Note: The <colgroup> tag must be a child of a <table> element, after any <caption> elements and before any <thead>, <tbody>, <tfoot>, and <tr> elements.

• Tip: To define different properties to a column within a <colgroup>, use the <col> tag within the <colgroup> tag.

Example of COLGROUP<table border="1"><colgroup>

<col span="2" style="background-color:red"><col style="background-color:yellow">

</colgroup><tr>

<th>ISBN</th><th>Title</th><th>Price</th>

</tr><tr>

<td>3476896</td><td>My first HTML</td><td>$53</td>

</tr></table>

Scope Attribute• The scope attribute defines a way to associate

header cells and data cells in a table.• The scope attribute identifies whether a cell is a

header for a column, row, or group of columns or rows.

• Example:<td scope="col|row|colgroup|rowgroup">Value Descriptioncol Specifies that the cell is a header for a columnrow Specifies that the cell is a header for a rowcolgroup Specifies that the cell is a header for a group of columnsrowgroup Specifies that the cell is a header for a group of rows

Example of Scope<table border="1"><tr>

<th></th><th scope="col">Month</th><th scope="col">Savings</th>

</tr><tr>

<td scope="row">1</td><td>January</td><td>$100</td>

</tr><tr>

<td scope="row">2</td><td>February</td><td>$80</td>

</tr></table>

Control Text Wrapping in Cells

• Click inside the cell tag for the text you want to control and type NOWRAP.

• To specify where a line breaks, type <BR>.• You can also use the <P> tag to control line

breaks in a cell.

• The Web browser displays the text without breaking the line.

Lab 5• Add a Table • Assign a Table Border • Adjust Cell Padding and Spacing

• Adjust Cell Width and Height

• Add Column Labels • Create Newspaper-Style Columns

• Create Side Navigation • Add a Table Caption • Control which Borders to Display

• Adjust the Table Size • Change Cell Alignment • Extend Cells across Columns and

Rows

• Create Column and Row Groups

• Add a Background Color to Cells

• Add a Background Color to a Table

• Insert an Image in a Cell

• Insert a Background Image

• Change Table Alignment

• Control Text Wrapping in Cells

• Nest a Table within a Table