HTML Tables
1.Creating HTML Tables
2.Table Borders
3.Table with no border
4.Headings in a Table
5.Table with a caption
6.Cells spanning multiple columns
7.Tags inside a table
8.Cell Padding
9.Cell Spacing
10.Table background colors and Images
11.Cell background colors and images
12.Frame Attribute
13.Using frame and border to control table borders
Creating HTML Tables
Tables are an excellent way to organize and display information on a page.
Tables are defined using <table> tag
A table is divided into rows with the <tr> tag,
and each row is devided into data cells using the <td> tag
td stands for "Tabledata" which is the content of a table cell.
A data cell can contain text,images,lists,paragraphs,forms,horizantal ruls,tables, and so on
A basic table includes the following tags:
Each table starts with <table> tag
Each table row starts with <tr> tag
Each table data (cell) starts with a <td> tag
table with one row and one column
<html>
<body>
<h4>one column:
<table border="1">
<tr>
<td>100</td>
</tr>
</table>
</body>
</html>
table with one row and three columns
<html>
<body>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
</body>
</html>
table with two rows three columns
<html>
</body>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
Table Borders
The defult border is 0, so if you do not specify a border attribute, the table is displayed without any borders
<html>
<body>
<h4>with a normal border</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>with a thick border:</h4>
<table border="8">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>with a very thick border:</h4>
<table border="15">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
Table With No Border
<html>
</body>
<h4>this table has no borders:</h4>
<table>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
<table border="0">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
Headings in a table
Table Headings are defined with the <th> tag.
<html>
</body>
<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>
<h4>vertical headers:</h4>
<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 777 1854</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 777 1855</td>
</tr>
</table>
</body>
</html>
Empty cells in a table
Table cells with no content do not display very well in most browsers.
Notice that the borders around the empty table cell are missing (except when using Mozilla Firefox)
<html>
</body>
<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>
</body>
</html>
To avoid this add a nonbreaking space ( ) to empty data cells to ensure the borders are visible
<html>
</body>
<table border="1">
<tr>
<td>row 1,cell 1</td>
<td>row 1,cell 2</td>
</tr>
<tr>
<td> </td>
<td></td>
</tr>
</table>
</body>
</html>
Table with a caption
<html>
</body>
<h4>this table has a caption, and a thick border:</h4>
<table border="6">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
Cells Spanning Multiple Columns
<html>
<body>
<h4>Cells that spans two columns:</h4>
<table border="1">
<tr>
<th>Name:</th>
<th colspan="2">Telephone</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 777 854</td>
<td>555 777 855</td>
</tr>
</table>
<h4>Cell that spans two rows:</h4>
<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 777 854</td>
</tr>
<tr>
<td>555 777 855</td>
</tr>
</table>
Tags Inside a Table
<html>
<body>
<table border="1">
<tr>
<td>
<p>This is a paragraph</p>
<p>This is a another paragraph</p>
</td>
<td>This cell contains a table:
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>This cell contains a list
<ul>
<li>apples</li>
<li>bananas</li>
<li>pineapples</li>
</ul>
</td>
<td>HELLO</td>
</tr>
</table>
</body>
</html>
Cell Padding
To create more white space between the cell content and itls borders.
<html>
<body>
<h4>without cellpadding</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>with cellpadding</h4>
<table border="1" cellpadding="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
Cell Spacing
use cellspacing to increase the distance between the cells
<html>
<body>
<h4>with out cellspacing:</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>with cellspacing:</h4>
<table border="1" cellspacing="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
Table Background Colors and Images
<html>
<body>
<h4>A background color:</h4>
<table border="1" bgcolor="gray">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>A background image:</h4>
<table border="1" background="bgdedert.jpg">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
Cell Background Colors and Images
<html>
<body>
<h4>Cell backgrounds:</h4>
<table border="1">
<tr>
<td bgcolor="gray">First</td>
<td>Row</td>
</tr>
<tr>
<td background="bgdesert.jpg">Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
Alighning Cell Content
how to use the alighn attribute to align the content of cells to create a neatly organized table.
<html>
<body>
<table width="400" border="1">
<tr>
<th alighn="left">Money spent on....</th>
<th alighn="right">January</th>
<th alighn="right">February</th>
</tr>
<tr>
<th alighn="left">Clothes</th>
<th alighn="right">$241.10</th>
<th alighn="right">$50.20</th>
</tr>
<tr>
<th alighn="left">Make-up</th>
<th alighn="right">$30.00</th>
<th alighn="right">$44.45</th>
</tr>
<tr>
<th alighn="left">Food</th>
<th alighn="right">$730.40</th>
<th alighn="right">$650.00</th>
</tr>
<tr>
<th alighn="left">Sum</th>
<th alighn="right">$1001.50</th>
<th alighn="right">$744.65</th>
</tr>
</table>
</body>
</html>
frame Attribute
to control borders around the table
<html>
<body>
<h4>with frame="border"</h4>
<table frame="border">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>with frame="box"</h4>
<table frame="box">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>with frame="void"</h4>
<table frame="void">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
<html>
<body>
<h4>with frame="above"</h4>
<table frame="above">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>with frame="below"</h4>
<table frame="below">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>with frame="hsides"</h4>
<table frame="hsides">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
<html>
<body>
<h4>with frame="vsides"</h4>
<table frame="vsides">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>with frame="lhs"</h4>
<table frame="lhs">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>with frame="rhs"</h4>
<table frame="rhs">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
Using frame and border to control table borders
use frame and border attributes to control the borders around the table.
if you see no frames around the tables in these examples, your browser does not support the frame attribute.
<html>
<body>
<table frame="hsides" border="3">
<tr>
<td>First Row</td>
</tr>
</table>
<br/>
<table frame="vsides" border="3">
<tr>
<td>First Row</td>
</tr>
</table>
</body>
</html>
Table Tags
TAG Description
<table> Defines a table
<th> Defines a table header
<tr> Defines a table row
<td> Defines a table data
<caption> Defines a table cell
<colgroup> Defines group of table columns
<col> Defines the attribute values for one or more coluns in a table
<thead> Defines a table head
<tbody> Defines a table body
<tfoot> Defines a table footer
1.Creating HTML Tables
2.Table Borders
3.Table with no border
4.Headings in a Table
5.Table with a caption
6.Cells spanning multiple columns
7.Tags inside a table
8.Cell Padding
9.Cell Spacing
10.Table background colors and Images
11.Cell background colors and images
12.Frame Attribute
13.Using frame and border to control table borders
Creating HTML Tables
Tables are an excellent way to organize and display information on a page.
Tables are defined using <table> tag
A table is divided into rows with the <tr> tag,
and each row is devided into data cells using the <td> tag
td stands for "Tabledata" which is the content of a table cell.
A data cell can contain text,images,lists,paragraphs,forms,horizantal ruls,tables, and so on
A basic table includes the following tags:
Each table starts with <table> tag
Each table row starts with <tr> tag
Each table data (cell) starts with a <td> tag
table with one row and one column
<html>
<body>
<h4>one column:
<table border="1">
<tr>
<td>100</td>
</tr>
</table>
</body>
</html>
table with one row and three columns
<html>
<body>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
</body>
</html>
table with two rows three columns
<html>
</body>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
Table Borders
The defult border is 0, so if you do not specify a border attribute, the table is displayed without any borders
<html>
<body>
<h4>with a normal border</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>with a thick border:</h4>
<table border="8">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>with a very thick border:</h4>
<table border="15">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
Table With No Border
<html>
</body>
<h4>this table has no borders:</h4>
<table>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
<table border="0">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
Headings in a table
Table Headings are defined with the <th> tag.
<html>
</body>
<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>
<h4>vertical headers:</h4>
<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 777 1854</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 777 1855</td>
</tr>
</table>
</body>
</html>
Empty cells in a table
Table cells with no content do not display very well in most browsers.
Notice that the borders around the empty table cell are missing (except when using Mozilla Firefox)
<html>
</body>
<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>
</body>
</html>
To avoid this add a nonbreaking space ( ) to empty data cells to ensure the borders are visible
<html>
</body>
<table border="1">
<tr>
<td>row 1,cell 1</td>
<td>row 1,cell 2</td>
</tr>
<tr>
<td> </td>
<td></td>
</tr>
</table>
</body>
</html>
Table with a caption
<html>
</body>
<h4>this table has a caption, and a thick border:</h4>
<table border="6">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
Cells Spanning Multiple Columns
<html>
<body>
<h4>Cells that spans two columns:</h4>
<table border="1">
<tr>
<th>Name:</th>
<th colspan="2">Telephone</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 777 854</td>
<td>555 777 855</td>
</tr>
</table>
<h4>Cell that spans two rows:</h4>
<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 777 854</td>
</tr>
<tr>
<td>555 777 855</td>
</tr>
</table>
Tags Inside a Table
<html>
<body>
<table border="1">
<tr>
<td>
<p>This is a paragraph</p>
<p>This is a another paragraph</p>
</td>
<td>This cell contains a table:
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>This cell contains a list
<ul>
<li>apples</li>
<li>bananas</li>
<li>pineapples</li>
</ul>
</td>
<td>HELLO</td>
</tr>
</table>
</body>
</html>
Cell Padding
To create more white space between the cell content and itls borders.
<html>
<body>
<h4>without cellpadding</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>with cellpadding</h4>
<table border="1" cellpadding="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
Cell Spacing
use cellspacing to increase the distance between the cells
<html>
<body>
<h4>with out cellspacing:</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>with cellspacing:</h4>
<table border="1" cellspacing="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
Table Background Colors and Images
<html>
<body>
<h4>A background color:</h4>
<table border="1" bgcolor="gray">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>A background image:</h4>
<table border="1" background="bgdedert.jpg">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
Cell Background Colors and Images
<html>
<body>
<h4>Cell backgrounds:</h4>
<table border="1">
<tr>
<td bgcolor="gray">First</td>
<td>Row</td>
</tr>
<tr>
<td background="bgdesert.jpg">Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
Alighning Cell Content
how to use the alighn attribute to align the content of cells to create a neatly organized table.
<html>
<body>
<table width="400" border="1">
<tr>
<th alighn="left">Money spent on....</th>
<th alighn="right">January</th>
<th alighn="right">February</th>
</tr>
<tr>
<th alighn="left">Clothes</th>
<th alighn="right">$241.10</th>
<th alighn="right">$50.20</th>
</tr>
<tr>
<th alighn="left">Make-up</th>
<th alighn="right">$30.00</th>
<th alighn="right">$44.45</th>
</tr>
<tr>
<th alighn="left">Food</th>
<th alighn="right">$730.40</th>
<th alighn="right">$650.00</th>
</tr>
<tr>
<th alighn="left">Sum</th>
<th alighn="right">$1001.50</th>
<th alighn="right">$744.65</th>
</tr>
</table>
</body>
</html>
frame Attribute
to control borders around the table
<html>
<body>
<h4>with frame="border"</h4>
<table frame="border">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>with frame="box"</h4>
<table frame="box">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>with frame="void"</h4>
<table frame="void">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
<html>
<body>
<h4>with frame="above"</h4>
<table frame="above">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>with frame="below"</h4>
<table frame="below">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>with frame="hsides"</h4>
<table frame="hsides">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
<html>
<body>
<h4>with frame="vsides"</h4>
<table frame="vsides">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>with frame="lhs"</h4>
<table frame="lhs">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>with frame="rhs"</h4>
<table frame="rhs">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
Using frame and border to control table borders
use frame and border attributes to control the borders around the table.
if you see no frames around the tables in these examples, your browser does not support the frame attribute.
<html>
<body>
<table frame="hsides" border="3">
<tr>
<td>First Row</td>
</tr>
</table>
<br/>
<table frame="vsides" border="3">
<tr>
<td>First Row</td>
</tr>
</table>
</body>
</html>
Table Tags
TAG Description
<table> Defines a table
<th> Defines a table header
<tr> Defines a table row
<td> Defines a table data
<caption> Defines a table cell
<colgroup> Defines group of table columns
<col> Defines the attribute values for one or more coluns in a table
<thead> Defines a table head
<tbody> Defines a table body
<tfoot> Defines a table footer
No comments:
Post a Comment