HTML Tables

|  | Search W3Schools : |

HOME | HTML | CSS | XML | JAVASCRIPT | ASP | PHP | SQL | MORE... |  | References | Examples | Forum | About

ADVERTISEMENTS XML Certification Download XML editor Custom Programming |  |

Table of contents

HTML Basic
HTML HOME
HTML Introduction
HTML Get Started
HTML Basic
HTML Headings
HTML Paragraphs
HTML Formatting
HTML Elements
HTML Attributes
HTML Styles
HTML Links
HTML Images
HTML Tables
HTML Lists
HTML Forms
HTML Colors
HTML Colornames
HTML Colorvalues
HTML Quick List
HTML Advanced
HTML Layout
HTML Frames
HTML Fonts
HTML 4.0 Why
HTML CSS
HTML Entities
HTML Head
HTML Meta
HTML URLs
HTML Scripts
HTML Attributes
HTML Events
HTML URL Encode
HTML Webserver
HTML Summary
Examples/Quiz
HTML Examples
HTML Quiz
HTML Exam
References
HTML Tag List
HTML Attributes
HTML Events
HTML Colornames
HTML Character Sets
HTML ASCII
HTML ISO-8859-1
HTML Symbols
HTML URL Encode
HTML Lang Codes
HTTP Messages

Selected Reading

Web Statistics
Web Glossary
Web Hosting
Web Quality
W3Schools Tutorials
W3Schools Forum
Helping W3Schools

# HTML Tables

Apples | 44%
Bananas | 23%
Oranges | 13%
Other | 10%

## Examples

Tables
How to define tables in an HTML document.

Table borders
This example demonstrates different table borders.

More examples at the bottom of the page.

## Tables

Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). The letters td stands for "table data," which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.

    <table border="1">
    <tr>
    <td>row 1, cell 1</td>
    <td>row 1, cell 2</td>
    </tr>
    <tr>
    <td>row 2, cell 1</td>
    <td>row 2, cell 2</td>
    </tr>
    </table>

How it looks in a browser:

row 1, cell 1 | row 1, cell 2
row 2, cell 1 | row 2, cell 2

## Tables and the Border Attribute

If you do not specify a border attribute the table will be displayed without any borders. Sometimes this can be useful, but most of the time, you want the borders to show.

To display a table with borders, you will have to use the border attribute:

    <table border="1">
    <tr>
    <td>Row 1, cell 1</td>
    <td>Row 1, cell 2</td>
    </tr>
    </table>

## Headings in a Table

Headings in a table are defined with the <th> tag.

    <table border="1">
    <tr>
    <th>Heading</th>
    <th>Another Heading</th>
    </tr>
    <tr>
    <td>row 1, cell 1</td>
    <td>row 1, cell 2</td>
    </tr>
    <tr>
    <td>row 2, cell 1</td>
    <td>row 2, cell 2</td>
    </tr>
    </table>

How it looks in a browser:

Heading | Another Heading
--- | ---
row 1, cell 1 | row 1, cell 2
row 2, cell 1 | row 2, cell 2

## Empty Cells in a Table

Table cells with no content are not displayed very well in most browsers.

    <table border="1">
    <tr>
    <td>row 1, cell 1</td>
    <td>row 1, cell 2</td>
    </tr>
    <tr>
    <td>row 2, cell 1</td>
    <td></td>
    </tr>
    </table>

How it looks in a browser:

row 1, cell 1 | row 1, cell 2
row 2, cell 1 |

Note that the borders around the empty table cell are missing (NB! Mozilla Firefox displays the border).

To avoid this, add a non-breaking space (&nbsp;) to empty data cells, to make the borders visible:

    <table border="1">
    <tr>
    <td>row 1, cell 1</td>
    <td>row 1, cell 2</td>
    </tr>
    <tr>
    <td>row 2, cell 1</td>
    <td>&nbsp;</td>
    </tr>
    </table>

How it looks in a browser:

row 1, cell 1 | row 1, cell 2
row 2, cell 1 |

## Basic Notes - Useful Tips

The <thead>,<tbody> and <tfoot> elements are seldom used, because of bad browser support. Expect this to change in future versions of XHTML. If you have Internet Explorer 5.0 or newer, you can view a working example in our XML tutorial.

## More Examples

Table with no border
This example demonstrates a table with no borders.

Headings in a table
This example demonstrates how to display table headers.

Empty cells
This example demonstrates how to use "&nbsp;" to handle cells that have no content.

Table with a caption
This example demonstrates a table with a caption.

Table cells that span more than one row/column
This example demonstrates how to define table cells that span more than one row or one column.

Tags inside a table
This example demonstrates how to display elements inside other elements.

Cell padding
This example demonstrates how to use cellpadding to create more white space between the cell content and its borders.

Cell spacing
This example demonstrates how to use cellspacing to increase the distance between the cells.

Add a background color or a background image to a table
This example demonstrates how to add a background to a table.

Add a background color or a background image to a table cell
This example demonstrates how to add a background to one or more table cells.

Align the content in a table cell
This example demonstrates how to use the "align" attribute to align the content of cells, to create a "nice-looking" table.

The frame attribute
This example demonstrates how to use the "frame" attribute to control the borders around the table.

The frame and border attributes
How to use the "frame" and "border" attributes to control the borders around the table.

## Table Tags

Tag | Description
--- | ---
<table> | Defines a table
<th> | Defines a table header
<tr> | Defines a table row
<td> | Defines a table cell
<caption> | Defines a table caption
<colgroup> | Defines groups of table columns
<col> | Defines the attribute values for one or more columns in a table
<thead> | Defines a table head
<tbody> | Defines a table body
<tfoot> | Defines a table footer

Ektron CMS400.NET Version 7.6 delivers all of the flexibility and features you need to deploy the Web site you want, quickly and efficiently. learn more...

6 ways to take your site to the next level with Ektron:

| Create site stickiness through social networking. Keep it personal, relevant and interactive and they'll come back for more.
| Keep it open. Your site needs to be ready and able to connect to outside services. Ektron's open API gives you maximum flexibility.
| Streamline content and document management. Users need to quickly and intuitively find and add information.
| Empower your content authors. Reduce IT bottlenecks by allowing business users to create and edit Web content and forms.
| Climb to the top of search rankings. SEO tools, URL aliasing and eCommerce for your digital marketing strategy
| Add powerful Web 2.0 tools like blogs, wikis, forums, geo-mapping, rating systems and RSS feeds easily.

See why there are 20,000+ Ektron integrations worldwide. Request an INSTANT DEMO or download a FREE TRIAL today.

WEB HOSTING
Password Protect Your Web Pages
$15 Domain Name Registration Save $20 / year!
Buy UK Domain Names Register Domain Names
Cheap Domain Names Cheap Web Hosting
Best Web Hosting
PHP MySQL Hosting
Top 10 Web Hosting
UK Reseller Hosting
Web Hosting
FREE Web Hosting

WEB BUILDING
Website Templates Flash Templates Website Builder Internet Business Opportunity
Custom Programming
FREE Trial or Demo Web Content Manager Forms,Web Alerts,RSS
Download XML editor
FREE Flash Website
FREE Web Templates

EDUCATION
US Web Design Schools
HTML Certification
JavaScript Certification
XML Certification
PHP Certification
ASP Certification

HOME or Top of Page |  | Printer Friendly
W3Schools is for training only. We do not warrant the correctness of its content. The risk from using it lies entirely with the user. While using this site, you agree to have read and accepted our terms of use and privacy policy. Copyright 1999-2009 by Refsnes Data. All Rights Reserved.