HTML Tables
HTML Tables Tutorial and Information

• HTML Basics

HTML Tutorial - HTML Tables

Tables are used to split up a specific area, or the entire web page, into cells, rows, and columns. This way the content (text and images) of the web page can be better organized and displayed.

Tables are defined by the table tag <table> and a table is divided into rows (horizontal) and columns (vertical). Each row and each column is divided into cells.

This indicates the beginning and end of a table: <table> </table>
A table row is indicated by the <tr> </tr> tags.
A table cell is indicated by the <td> </td> tags.

<td> stands for "table data" contained in the table cell. Table cells can contain HTML tags, text, images, forms, or even more tables (nested tables).

Basic HTML Table Layout

Here is a simple basic table layout with 2 rows and 2 columns = 4 table cells:

<table border="1">
  <tr>
    <td>This is row 1/column 1 with cell 1</td>
    <td>This is row 1/column 2 with cell 2</td>
  </tr>
  <tr>
    <td>This is row 2/column 1 with cell 3</td>
    <td>This is row 2/column 2 with cell 4</td>
  </tr>
</table>

Here is what this table looks like in a browser:

This is row 1/column 1 with cell 1	This is row 1/column 2 with cell 2
This is row 2/column 1 with cell 3	This is row 2/column 2 with cell 4

As you can see in the very first line of the table's HTML code, the table attribute border with the value "1" was added. If you create the same table without the border attribute, the table border would not be visible in a web browser.

<table>
  <tr>
    <td>This is row 1/column 1 with cell 1</td>
    <td>This is row 1/column 2 with cell 2</td>
  </tr>
  <tr>
    <td>This is row 2/column 1 with cell 3</td>
    <td>This is row 2/column 2 with cell 4</td>
  </tr>
</table>

And here is what the table without the border attribute looks like in a browser (The border is not visible in a browser):

This is row 1/column 1 with cell 1	This is row 1/column 2 with cell 2
This is row 2/column 1 with cell 3	This is row 2/column 2 with cell 4

Table Headings

Table headings are defined in HTML with <th> </th>:

<table border="1">
   <tr>
     <th>Heading Left</th>
     <th>Heading Right</th>
  </tr>
  <tr>
    <td>This is row 1/column 1 with cell 1</td>
    <td>This is row 1/column 2 with cell 2</td>
  </tr>
  <tr>
    <td>This is row 2/column 1 with cell 3</td>
    <td>This is row 2/column 2 with cell 4</td>
  </tr>
</table>

And here is what the table with headings looks like:

Heading Left	Heading Right
This is row 1/column 1 with cell 1	This is row 1/column 2 with cell 2
This is row 2/column 1 with cell 3	This is row 2/column 2 with cell 4

Table Caption

Here is an example of the same table with a table caption:

<table border="1">
  <caption>Table Caption</caption>
   <tr>
     <th>Heading Left</th>
     <th>Heading Right</th>
  </tr>
  <tr>
    <td>This is row 1/column 1 with cell 1</td>
    <td>This is row 1/column 2 with cell 2</td>
  </tr>
  <tr>
    <td>This is row 2/column 1 with cell 3</td>
    <td>This is row 2/column 2 with cell 4</td>
  </tr>
</table>

And here is what the table with headings and table caption looks like in a web browser:

Table Caption

Heading Left	Heading Right
This is row 1/column 1 with cell 1	This is row 1/column 2 with cell 2
This is row 2/column 1 with cell 3	This is row 2/column 2 with cell 4

Nested Tables

Nested tables are tables within tables. Nested tables let you create nice layout effects and enhance design aspects for web site layouts.

• Nested Tables And HTML Table Layouts

To find out how to add cellspacing, cellpadding, table height and width, table cell height and width, background color and background images to a table please continue to:

• HTML Table and Table Properties Alignment
• HTML Background and Table Background
• HTML Table Borders
• HTML Table Properties

Or check out HTML Tutorial II for more HTML table design tips.

• HTML Tutorial II

• Back
• Next

---

HTML Related Links

• How to Get a Web Site or Online Business Started
• CMS - Content Management System
• How to Choose and Register the Right Domain Name
• Making Revenue - How to Make Money With a Website
• Server and Hosting

© This Article is Copyrighted by WebmasterSeminar.com

Please do not copy or reproduce this article in whole or part, in any form, without mentioning the source and including a live link back to WebmasterSeminar.com - Thank You!

LINK TO THIS TUTORIAL:

Copy the code below and paste into your web page

<a href="http://www.webmasterseminar.com/htmltables.php">
Webmaster Seminar</a><br />
HTML Tables - Free Information, Tutorials and HTML Resources