Logo Your Web Hosting Solution
Line
HTML Guide
Introduction
Documents
Formatting
Links
Images
Lists
Tables
Forms
Tutorials Index
Home Page
HTML Tutorial - Tables

A table is a great way to present tabular information organized in rows and columns.

1. Table basics

The below html code defines a basic table structure.

<TABLE BORDER="1">
<TR>
    <TD>Cell 1</TD>
    <TD>Cell 2</TD>
    <TD>Cell 3</TD>
</TR>
<TR>
    <TD>Cell 4</TD>
    <TD>Cell 5</TD>
    <TD>Cell 6</TD>
</TR>
</TABLE>

The TABLE html tag is used to start/stop tables. By setting the BORDER attribute to "1", we add a border to a table. Set the BORDER attribute to "0" for no border.

The TR html tag is used to add a row to tables. Create data (cells) by using TD tags.

The above html would produce this table structure :

Cell 1Cell 2Cell 3
Cell 4Cell 5Cell 6

This table contains two rows with three cells each.

2. Combining cells

Two (or more) cells can be combined to make a larger cell. The html code combines two cells on the first row.

<TABLE BORDER="1">
<TR>
    <TD COLSPAN=2>Cell 1</TD>
    <TD>Cell 2</TD>
</TR>
<TR>
    <TD>Cell 3</TD>
    <TD>Cell 4</TD>
    <TD>Cell 5</TD>
</TR>
</TABLE>

The COLSPAN attribute defines the number of cells to combine in this column. The html produces this table.

Cell 1Cell 2
Cell 3Cell 4Cell 5

The first cell now takes up two spaces on the first column. Cells on the same row can also be combined.

<TABLE BORDER="1">
<TR>
    <TD ROWSPAN=2>Cell 1</TD>
    <TD>Cell 2</TD>
    <TD>Cell 3</TD>
</TR>
<TR>
    <TD>Cell 4</TD>
    <TD>Cell 5</TD>
</TR>
</TABLE>

The ROWSPAN attribute defines the number of cells to combine in this row. The html produces this table.

Cell 1Cell 2Cell 3
Cell 4Cell 5

Multiple cells can be combined across multiple rows and columns to create more complex html tables.

3. Advanced usage

Tables can be combined with html forms to create well organized, easy to use, feedback forms.

Only the basics are covered in this guide. More tags and attributes are available, backgrounds and colors can be added. This page exists to help beginners.

Top Of Page 
Line
Copyright© 1996 - 2017 Clockwatchers, Inc.