HTML Tables

These tables have the attribute and value border="2" added to their table start tags in order to clarify their visual structures.

Sections by page titles:

Table Elements
Columns and Rows
Column and Row Spanning
Sizes and Spacings Attributes
Color and Alignment Attributes

1: Table Elements

Table Data Cells

Heading for Text

Content text for the table

Data Cells Contents

Heading for Text

Content text for the table

List item text

Rows

Table Head
Text Data

Table Elements
Columns and Rows
Column and Row Spanning
Sizes and Spacings Attributes
Color and Alignment Attributes

2: Table Columns and Rows

Columns

Content text for the table

Columns

6:00pm

9:00pm

Columns and Rows

6:30pm	9:30pm
HTML Class starts	HTML Class ends

More Rows

6:30pm	9:30pm
HTML Class starts	HTML Class ends
Drawing Class starts	Drawing Class ends

Column Content Alignment (Sidebar)

Content text for the table	More content text for the table
Content text for the table	More content text for the table

Table Elements
Columns and Rows
Column and Row Spanning
Sizes and Spacings Attributes
Color and Alignment Attributes

3: Tables with Column and Row Spanning

Column Span

Timetable
6:30pm	9:30pm

Column and Row Span

	Timetable Colspan
	6:30pm	9:30pm
Course Rowspan	HTML Class starts	HTML Class ends
Course Rowspan	Drawing Class starts	Drawing Class ends

Table Elements
Columns and Rows
Column and Row Spanning
Sizes and Spacings Attributes
Color and Alignment Attributes

4: Size and Spacing Attributes

Widths

Percentage Width

This table will extend all the way across the window in most browsers no matter how little content there is.

Fixed Pixel Width

This table will be 1200 pixels wide, and so will induce a horizontal scrollbar on any display device that doesn't have a 1200 pixel-wide window available to display the content. The author of the table doesn't quite understand how to make an adaptive Web page yet.

Borders

This table will have a thin border of two pixels around all of its table data elements. (If you want to say here: <td> then you must use character entities.)

This table will have no visible border.

Cell Spacing and Padding

Spacing

This cell will be set off 10 pixels from the other.

Padding

This table will have a wide interior border to its cells. The contents stand away from the edge of the cell.

Table Elements
Columns and Rows
Column and Row Spanning
Sizes and Spacings Attributes
Color and Alignment Attributes

5: Color and Alignment Attributes

Color

This table will have a background color of a sort of blue (much BB).

Element Colors

This table will have a background color of a sort of blue (much BB). This row will be paler blue.

Hey, lighter blue

This table cell will be an even paler blue; the other cells are darker.

Alignments

Table Alignment

This table will be pushed to the right of the window, and will have a background color of a sort of blue, and a border edge.

Row and Cell Alignment

Align

This table will be pushed to the center of the window, and this text will be right-aligned.

Vertical Alignment

This content will be at the top.

This content will be at the bottom

More Attributes with Cell Padding and Spacing, Color, Spans, Vertical Alignment

Elaborate Tables
This table will have a background color of a sort of blue (much BB). This row will be paler blue and its content will be vertically aligned to the top.	Locally low with cell valign.	This table cell will be an even paler blue; the other cells are darker.
A gratuitous colspan		A filler

Table Elements
Columns and Rows
Column and Row Spanning
Sizes and Spacings Attributes
Color and Alignment Attributes

A page that uses the height attribute for table to stretch the contents.