Web FoundationsMONDAY, OCTOBER 28, 2013

LECTURE 19: TABLES

Tables

The Basic Table

Company Employees Founded

ACME Inc 1000 1947

XYZ Corp 2000 1973

Tables

The Basic Table: The Parts Explained

Company Employees Founded

ACME Inc 1000 1947

XYZ Corp 2000 1973

Table is the container that holds all the individual parts

Company Employees Founded

ACME Inc 1000 1947

XYZ Corp 2000 1973

Company Employees Founded

ACME Inc 1000 1947

XYZ Corp 2000 1973

<table>

Each row is a container that holds all the individual data cells

<tr>

Each cell is a container that holds the individual data

<td>

Basic Table

Company Employees Founded

ACME Inc 1000 1947

XYZ Corp 2000 1973

<table>

</table>

Basic Table

Company Employees Founded

ACME Inc 1000 1947

XYZ Corp 2000 1973

<table>

</table>

<tr>

<tr>

<tr>

</tr>

</tr>

</tr>

Basic Table

Company Employees Founded

ACME Inc 1000 1947

XYZ Corp 2000 1973

<table>

</table>

<tr>

<tr>

<tr>

</tr>

</tr>

</tr>

<td>

<td>

<td>

<td>

<td>

<td>

<td>

<td>

<td>

</td>

</td>

</td>

</td>

</td>

</td>

</td>

</td>

</td>

http://faculty.cascadia.edu/cduckett/foundations/tables/basic0.html

http://faculty.cascadia.edu/cduckett/foundations/tables/basic.html

Basic Table

Company Employees Founded

ACME Inc 1000 1947

XYZ Corp 2000 1973

<table>

</table>

<tr>

<tr>

<tr>

</tr>

</tr>

</tr>

<td>

<td>

<td>

<td>

<td>

<td>

<td>

<td>

<td>

</td>

</td>

</td>

</td>

</td>

</td>

</td>

</td>

</td>

Company Employees Founded

ACME Inc 1000 1947

XYZ Corp 2000 1973

<table>

</table>

<tr>

<tr>

<tr>

</tr>

</tr>

</tr>

<td>

<td>

<td>

<td>

<td>

<td>

<td>

<td>

<td>

</td>

</td>

</td>

</td>

</td>

</td>

</td>

</td>

</td>

Column Column Column

Tables

The Basic Table with Border

http://faculty.cascadia.edu/cduckett/foundations/tables/basic2.html

<table border=1>

Tables

Firefox

<table border=8>

Internet Explorer Chrome

http://faculty.cascadia.edu/cduckett/foundations/tables/basic2a.html

Firefox<style>table{ border-color: #000; border-width: 8px; border-style: solid; /* Same as: border: 8px solid #000; */}

td { border-color: #369; border-width: 2px; border-style: solid; /* Same as: border: 2px solid #369; */}</style>

Internet Explorer

Chrome

http://faculty.cascadia.edu/cduckett/foundations/tables/basic2b.html

Tables: Borders Made Using CSS

Tables

The Basic Table with Table Header Tags <th>

http://faculty.cascadia.edu/cduckett/foundations/tables/basic3.html

http://faculty.cascadia.edu/cduckett/foundations/tables/basic3a.html

http://faculty.cascadia.edu/cduckett/foundations/tables/basic3b.html

Tables

The Basic Table with Table Header Tags and Background Colors

http://faculty.cascadia.edu/cduckett/foundations/tables/basic4.html

Additional Table Tags

Caption

http://faculty.cascadia.edu/cduckett/foundations/tables/basic5.html

Additional Table Tags

Border Collapse with CSS table{ border-collapse:collapse;}

http://faculty.cascadia.edu/cduckett/foundations/tables/basic6.html

From this…

to this…

Additional Table Tags

Table Padding with CSS td{ padding:15px;}

http://faculty.cascadia.edu/cduckett/foundations/tables/basic7.html

Additional Table Tags

Alignment with CSS td{ text-align:right;}

http://faculty.cascadia.edu/cduckett/foundations/tables/basic8.html

Height and Vertical Alignment with CSS td{ height:50px; vertical-align:top;}

http://faculty.cascadia.edu/cduckett/foundations/tables/basic9.html

Additional Table Tags

Additional Table Tags

Table Width with CSS

table{ width:50%;}

td{ width:150px;}

or

http://faculty.cascadia.edu/cduckett/foundations/tables/basic10.html

http://faculty.cascadia.edu/cduckett/foundations/tables/basic11.html

Row Groups

THEAD, TFOOT, and TBODY

http://faculty.cascadia.edu/cduckett/foundations/tables/basic12.html

Spanning

Column and Row Spanning

http://faculty.cascadia.edu/cduckett/foundations/tables/basic13.html

Spanning

Column and Row Spanning

Column Span

Row Span

Row

RowRowRow

Column Column Column

Spanning

Column and Row Spanning

http://faculty.cascadia.edu/cduckett/foundations/tables/basic13a.html

Spanning

Column and Row Spanning

http://faculty.cascadia.edu/cduckett/foundations/tables/basic14.html

Table Inside a Table

http://faculty.cascadia.edu/cduckett/foundations/tables/basic15.html

Tables

Other Table Links• HTML Table Tutorial• HTML5 Tables

http://faculty.cascadia.edu/cduckett/foundations/tables/

More Table Examples with CSS Formatting• General Table• Column Options• Column Styles• Financial • Dark