HTML Tables
HTML Tables
Apples |
44% |
Bananas |
23% |
Oranges |
13% |
Other |
10% |
|
 |
Try it Yourself - Examples |
Tables
How to create tables in an HTML document.
Table borders
How to specify different table borders.
(You can find more examples at the bottom of this page).
HTML 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). td stands for "table data," and holds the
content of a data cell. A <td> tag can contain text, links, images, lists, forms,
other
tables, etc.
Table Example
<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 the HTML code above looks in a browser:
row 1, cell 1 |
row 1, cell 2 |
row 2, cell 1 |
row 2, cell 2 |
HTML Tables and the Border Attribute
If you do not specify a border attribute, the table will be displayed without
borders. Sometimes this can be useful, but most of the time, we want the
borders to show.
To display a table with borders, specify the border attribute:
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
|
HTML Table Headers
Header information in a table are defined with the <th> tag.
The text in a th element will be bold and centered.
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</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 the HTML code above looks in a browser:
Header 1 |
Header 2 |
row 1, cell 1 |
row 1, cell 2 |
row 2, cell 1 |
row 2, cell 2 |
 |
More Examples |
Tables without borders
How to create tables without borders.
Table headers
How to create table headers.
Table with a caption
How to add a caption to a table.
Table cells that span more
than one row/column
How to define table cells that span more than
one row or one column.
Tags inside a table
How to display elements inside other elements.
Cell padding
How to use cellpadding to create more white space
between the cell content and its borders.
Cell spacing
How to use cellspacing to increase the distance
between the cells.
The frame attribute
How to use the "frame" attribute to control
the borders around the table.
HTML 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 a group of columns in a table, for formatting |
<col /> |
Defines attribute values for one or more columns in a table |
<thead> |
Groups the header content in a table |
<tbody> |
Groups the body content in a table |
<tfoot> |
Groups the footer content in a table
|
Create a free Flash website with our simple, online web design editing platform. Stunning templates
and user-friendly tools make website building easy and fun.
Start Creating your free website now!

The Altova MissionKit is an integrated suite of tools ideal for:
- XML development
- Web & Web services development
- Data mapping & integration
- Rendering & publishing XML & database data
- XBRL validation, taxonomy editing, transformation & rendering
- Chart & report generation for XML & XBRL
The MissionKit for XML Developers includes XMLSpy® - the industry-leading XML editor; MapForce® - a
graphical data mapping, conversion, and integration tool; StyleVision® - a visual XSLT stylesheet and report designer;
DiffDog® - an XML-aware diff/merge tool; and 2 additional tools.
Try all 6 products free for 30 days!
Download a fully-functional free trial
|
|
|
|