HTML Tables

Contents
HTML Tables
Simple Tables
Complete HTML Tables
Data cells and Header cells
Nested Tables
Complex tables
Cells Width
Cell Spacing and Padding
Column and Row Span

HTML Tables

HTML Tables
Tables represent tabular data
A table consists of one or several rows
Each row has one or more columns
Tables comprised of several core tags:
: begin / end the table
: create a table row
: create tabular data (cell)
Tables should not be used for layout
Use CSS floats and positioning styles instead

Simple HTML Tables – Example
Lecture
1
Lecture 2
Lecture 2 - Demos
1

Data Cells and Header Cells
Two kinds of cells in HTML tables
Data cells – containing the table data
Header cells – used for the column names or some more important cells
Why two kinds of cells?
Used to semantically separate the cells
Full Name Mark
Doncho Minkov Very good (5)
Georgi Georgiev Exellent (6)

Complete HTML Tables
Table rows split into three semantic sections: header, body and footer
denotes table header and contains elements, instead of elements
denotes collection of table rows that contain the very data
denotes table footer but comes BEFORE the tag
and define columns (used to set column widths)
rules=“groups”

Complete HTML Table: Example
Column 1
Column 2
Footer 1
Footer 2
Cell 1.1
Cell 1.2
Cell 2.1
Cell 2.2
header
footer
Last comes the body (data)
th
columns

Column 1
Column 2
Footer 1
Footer 2
Cell
1.1
Cell 1.2
Cell 2.1
Cell 2.2
Complete HTML Table:
Example (2)
table-full.html
Although the footer is before the data in the code, it is displayed last 1.1

Nested Tables
Tables in Tables in Tables in Tables…

Nested Tables
Table "cells" () can contain nested tables (tables within tables):
Contact:
First Name
Last Name
nested-tables.html

Complex Tables
With Padding, Spacing and Stuff

cellpadding
Defines the empty space around the cell content
cellspacing
Defines the empty space between cells
Cell Spacing and Padding
Tables have two attributes related to space

Cell Spacing and Padding – Example
Table Cells
First
Second
First
Second
table-cells.html

Cell Spacing and Padding – Example (2)
Table Cells
cellpadding="0">
First
Second
First
Second
table-cells.html cellpadding="0">

Row and Column
Spans
How to Make a Two-Cells Column or Row?

rowspan
Defines how many rows the cell occupies
colspan
Defines how many columns the cell occupies
Column and Row Span
Cells have two attributes related to merging
cell[1,1]
cell[1,2]
cell[2,1]
colspan="1"
colspan="1"
colspan="2"
cell[1,1]
cell[1,2]
cell[2,1]
rowspan="2"
rowspan="1"
rowspan="1"

Column and Row Span –
Example
Cell[1,1]
Cell[2,1]
Cell[1,2]
Cell[2,2]
Cell[3,2]
Cell[1,3]
Cell[2,3]
table-colspan-rowspan.html

Column and Row Span – Example (2)
class="3">
<
/tr>
Cell[1,1]
Cell[2,1]
Cell[1,2]
Cell[2,2]
Cell[3,2]
Cell[1,3]
Cell[2,3]
table-colspan-rowspan.html class="3">

Homework
Create Web Pages like the following using tables:
Create a Web Page like the following using forms: