Home ||| Extras ||| HTML ||| Tables


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:

 
  1. Table Elements
  2. Columns and Rows
  3. Column and Row Spanning
  4. Sizes and Spacings Attributes
  5. 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


 
  1. Table Elements
  2. Columns and Rows
  3. Column and Row Spanning
  4. Sizes and Spacings Attributes
  5. Color and Alignment Attributes

2: Table Columns and Rows


Columns

Content text for the table

More 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


 
  1. Table Elements
  2. Columns and Rows
  3. Column and Row Spanning
  4. Sizes and Spacings Attributes
  5. 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

Drawing Class starts

Drawing Class ends


 
  1. Table Elements
  2. Columns and Rows
  3. Column and Row Spanning
  4. Sizes and Spacings Attributes
  5. 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.

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.


 
  1. Table Elements
  2. Columns and Rows
  3. Column and Row Spanning
  4. Sizes and Spacings Attributes
  5. 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


  1. Table Elements
  2. Columns and Rows
  3. Column and Row Spanning
  4. Sizes and Spacings Attributes
  5. Color and Alignment Attributes

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