HTML Tables

Course weeks and topics 
1. Intro to HTML 56. Page Layout with CSS
2. First Web Page7. HTML Tables
3. Developing a Web Site8. HTML Forms
4. Design with CSS9. Multimedia
5. Midterm10.Term Project

 

Table of Contents

HTML TablesAnnouncementsIntroductionStructure of a TableBordersHeadingsRow and Column SpansCaptions

Announcements

 

Introduction

 

Structure of a Table

Tables are constructed using multiple elements (which means multiple tags). A table with two rows and three columns would be written in HTML like this:

 

The table will be rendered like this:

row1, column 1 row1, column 2 row 1, column 3
row2, column 1 row2, column 2 row 2, column 3

 

Borders

Borders can be added using CSS. For example:

 

The table will be rendered like this:

row1, column 1 row1, column 2 row 1, column 3
row2, column 1 row2, column 2 row 2, column 3

 

Headings

A special type of table cell is a heading, . The following code can be placed above row 1 and provides headings for the columns:

 

The table will be rendered like this:

column 1column 2column 3
row 1, column 1row 1, column 2row 1, column 3
row 2, column 1row 2, column 2row 2, column 3

 

Row and Column Spans

The rowspan attribute is used to make a <td> element stretch across two rows.

The colspan attribute is used to make a <td> element stretch across two columns.

 

The table will be rendered like this:

row 1, columns 1 and 2 rows 1 and 2, column 3
row2, column 1 row2, column 2

 

Captions