Tables are used when you need to show "tabular data" i.e. information that is logically presented in rows and columns.
Building tables in HTML may at first seem complicated but if you keep cool and watch your step, it is actually strictly logical - just like everything else in HTML.
Tables are used on websites for two major purposes:
• The obvious purpose of arranging information in a table
• The less obvious - but more widely used - purpose of creating a page layout with the use of hidden tables.
Using tables to divide the page into different sections is an extremely powerful tool. Almost all major sites on the web are using invisible tables to layout the pages.
The most important layout aspects that can be done with tables are:
• Dividing the page into separate sections.
An invisible table is excellent for this purpose.
• Creating menus.
Typically with one color for the header and another for the links following in the next lines.
• Adding interactive form fields.
Typically a gray area containing a search option.
• Creating fast loading headers for the page.
A colored table with a text on it loads like a bullet compared to even a small banner
• Easy alignment of images that have been cut into smaller pieces.
• A simple way to allow text to be written in two or more columns next to each other.
The importance of using tables for these layout purposes can't be overrated. However there are a few things to keep in mind when doing so.
Most important is, that the content of a table is not shown until the entire table is loaded. If you have extremely long pages, you should divide it into two or more tables - allowing the user to start reading the upper content while the rest of the page is loading.
Now let's proceed with learning about the different techniques...
Example 1:
Will look like this in the browser:
What's the difference between
As you will see from the above example, this is probably the most complicated HTML example we have given you so far. Let's break it down and explain the different tags:
3 different elements are used to insert tables:
Just to make it clear: rows are horizontal lines of cells and columns are vertical lines of cells:
Will look like this in the browser:
Example 3:
Will look like this in the browser:
As with images, you can also set the width of a table in pixels - or alternatively in percentage of the screen:
Example 4:
In the old days on the Internet - i.e. a few years ago - tables were often used as a layout tool. But if you want to control the presentation of texts and images there is a much cooler way to do it (hint: CSS). But more about that later.
Now, put what you just learned to practice and design a number of tables in different sizes, with different attributes and content. This should keep you busy for hours.
Example 1:
<table border="1">
<tr>
<td colspan="3">Cell 1</td>
</tr>
<tr>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
Building tables in HTML may at first seem complicated but if you keep cool and watch your step, it is actually strictly logical - just like everything else in HTML.
Tables are used on websites for two major purposes:
• The obvious purpose of arranging information in a table
• The less obvious - but more widely used - purpose of creating a page layout with the use of hidden tables.
Using tables to divide the page into different sections is an extremely powerful tool. Almost all major sites on the web are using invisible tables to layout the pages.
The most important layout aspects that can be done with tables are:
• Dividing the page into separate sections.
An invisible table is excellent for this purpose.
• Creating menus.
Typically with one color for the header and another for the links following in the next lines.
• Adding interactive form fields.
Typically a gray area containing a search option.
• Creating fast loading headers for the page.
A colored table with a text on it loads like a bullet compared to even a small banner
• Easy alignment of images that have been cut into smaller pieces.
• A simple way to allow text to be written in two or more columns next to each other.
The importance of using tables for these layout purposes can't be overrated. However there are a few things to keep in mind when doing so.
Most important is, that the content of a table is not shown until the entire table is loaded. If you have extremely long pages, you should divide it into two or more tables - allowing the user to start reading the upper content while the rest of the page is loading.
Now let's proceed with learning about the different techniques...
Example 1:
table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
Cell 1
|
Cell 2
|
Cell 3
|
Cell 4
|
What's the difference between <tr> and <td>?
As you will see from the above example, this is probably the most complicated HTML example we have given you so far. Let's break it down and explain the different tags:3 different elements are used to insert tables:
- The opening tag
<table>and the closing tag</table>starts and ends the table. Logical. <tr>stands for "table row" and starts and ends horizontal rows. Still logical.<td>is short for "table data". This tag starts and ends each cell in the rows of your table. All simple and logical.
<table>, followed by a <tr>, which indicates the beginning of a new row. Two cells are inserted in this row: <td>Cell 1</td> and <td>Cell 2</td>. The row is hereafter closed with a </tr> and a new row <tr> begins immediately after. The new row also contains two cells. The table is closed with </table>.Just to make it clear: rows are horizontal lines of cells and columns are vertical lines of cells:
Cell 1
|
Cell 2
|
Cell 3
|
Cell 4
|
Cell 1 and Cell 2 form a row. Cell 1 and Cell 3 form a column:
In the above example, the table has two rows and two columns. However, a table can have an unlimited number of rows and columns.
<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 5</td>
<td>Cell 6</td>
<td>Cell 7</td>
<td>Cell 8</td>
</tr>
<tr>
<td>Cell 9</td>
<td>Cell 10</td>
<td>Cell 11</td>
<td>Cell 12</td>
</tr>
</table>
Cell 1
|
Cell 2
|
Cell 3
|
Cell 4
|
Cell 5
|
Cell 6
|
Cell 7
|
Cell 8
|
Cell 9
|
Cell 10
|
Cell 11
|
Cell 12
|
Are there any attributes?
Of course there are attributes. For example, the border attribute is used to specify the thickness of the border around your table:Example 3:
Will look like this in the browser:
Cell 1
|
Cell 2
|
Cell 3
|
Cell 4
|
Example 4:
<table border="1" width="30%">
More attributes?
There are lots of attributes for tables. Here are two more:- align: specifies the horizontal alignment of the content in the entire table, in a row or in a single cell. For example, left, center or right.
- valign: specifies the vertical alignment of the content in a cell. For example, top, middle or bottom.
Example 5:
<td align="right" valign="top">Cell 1</td>
What can I insert in my tables?
Theoretically, you can insert anything in tables: text, links and images... BUT tables are meant for presenting tabular data (i.e. data which can be meaningfully presented in columns and rows) so refrain from putting things into tables simply because you want them to be placed next to each other.In the old days on the Internet - i.e. a few years ago - tables were often used as a layout tool. But if you want to control the presentation of texts and images there is a much cooler way to do it (hint: CSS). But more about that later.
Now, put what you just learned to practice and design a number of tables in different sizes, with different attributes and content. This should keep you busy for hours.
More about tables:
The title "More about tables" may sound a bit boring. But look at the positive side, when you master tables, there is absolutely nothing about HTML that will knock you out.What is left then?
The two attributescolspan and rowspan are used when you want to create fancy tables.Colspan is short for "column span". Colspan is used in the <td> tag to specify how many columns the cell should span:Example 1:
<table border="1">
<tr>
<td colspan="3">Cell 1</td>
</tr>
<tr>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
Will look like this in the browser:
Cell 1
| ||
Cell 2
|
Cell 3
|
Cell 4
|
colspan to "3", the cell in the first row spans three columns. If we instead had set colspan to "2", the cell would only have spanned two columns and it would have been necessary to insert an additional cell in the first row so that the number of columns will fit in the two rows.Example 2:
<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>
Will look like this in the browser:
Cell 1
|
Cell 2
| |
Cell 3
|
Cell 4
|
Cell 5
|
What about rowspan?
As you might already have guessed,rowspan specifies how many rows a cell should span over:Example 3:
<table border="1">
<tr>
<td rowspan="3">Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 4</td>
</tr>
</table>
Will look like this in the browser:
In the example above
Confused? Well, it is not uncomplicated and it is easy to lose track. Therefore, it might be a good idea to draw the table on a piece of paper before you begin with the HTML.
Not confused? Then go ahead and create a couple of tables with both
Each table starts with a table tag. Each table row starts with a tr tag. Each table data starts with a td tag.
Each table starts with a table tag. Each table row starts with a tr tag. Each table data starts with a td tag.
An HTML table consists of the <table> element and one or more <tr>, <th>, and <td> elements.
The <tr> element defines a table row, the <th> element defines a table header, and the <td> element defines a table cell.
A more complex HTML table may also include <caption>, <col>, <colgroup>, <thead>, <tfoot>, and <tbody> elements.
An HTML table has two kinds of cells:
The text in <td> elements are regular and left-aligned by default.
A <tr> element contains one or more <th> or <td> elements.
An HTML table has two kinds of cells:
The text in <td> elements are regular and left-aligned by default.
The <caption> tag must be inserted immediately after the <table> tag.
You can specify only one caption per table.
Tip: By default, the table caption will be center-aligned above a table. However, the CSS properties "text-align" and"caption-side" can be used to align and place the caption.
The <colgroup> tag is useful for applying styles to entire columns, instead of repeating the styles for each cell, for each row.
Note: The <colgroup> tag must be a child of a <table> element, after any <caption> elements and before any <thead>, <tbody>, <tfoot>, and <tr> elements.
Tip: To define different properties to a column within a <colgroup>, use the <col> tag within the <colgroup> tag.
The <col> tag is useful for applying styles to entire columns, instead of repeating the styles for each cell, for each row.
The <thead> element is used in conjunction with the <tbody> and <tfoot> elements to specify each part of a table (header, body, footer).
Browsers can use these elements to enable scrolling of the table body independently of the header and footer. Also, when printing a large table that spans multiple pages, these elements can enable the table header and footer to be printed at the top and bottom of each page.
The <thead> tag must be used in the following context: As a child of a <table> element, after any <caption>, and <colgroup> elements, and before any <tbody>, <tfoot>, and <tr> elements.
Tip: The <thead>, <tbody>, and <tfoot> elements will not affect the layout of the table by default. However, you can use CSS to style these elements.
The <tbody> element is used in conjunction with the <thead> and <tfoot> elements to specify each part of a table (body, header, footer).
Browsers can use these elements to enable scrolling of the table body independently of the header and footer. Also, when printing a large table that spans multiple pages, these elements can enable the table header and footer to be printed at the top and bottom of each page.
The <tbody> tag must be used in the following context: As a child of a <table> element, after any <caption>, <colgroup>, and <thead> elements.
Tip: The <thead>, <tbody>, and <tfoot> elements will not affect the layout of the table by default. However, you can use CSS to style these elements.
The <tfoot> element is used in conjunction with the <thead> and <tbody> elements to specify each part of a table (footer, header, body).
Browsers can use these elements to enable scrolling of the table body independently of the header and footer. Also, when printing a large table that spans multiple pages, these elements can enable the table header and footer to be printed at the top and bottom of each page.
The <tfoot> tag must be used in the following context: As a child of a <table> element, after any <caption>, <colgroup>, and <thead> elements and before any <tbody> and <tr> elements.
Tip: The <thead>, <tbody>, and <tfoot> elements will not affect the layout of the table by default. However, you can use CSS to style these elements.
The <tfoot> element is used in conjunction with the <thead> and <tbody> elements to specify each part of a table (footer, header, body).
Browsers can use these elements to enable scrolling of the table body independently of the header and footer. Also, when printing a large table that spans multiple pages, these elements can enable the table header and footer to be printed at the top and bottom of each page.
The <tfoot> tag must be used in the following context: As a child of a <table> element, after any <caption>, <colgroup>, and <thead> elements and before any <tbody> and <tr> elements.
Tip: The <thead>, <tbody>, and <tfoot> elements will not affect the layout of the table by default. However, you can use CSS to style these elements.
Cell 1
|
Cell 2
|
Cell 3
| |
Cell 4
|
rowspan is set to "3" in Cell 1. This specifies that the cell must span over 3 rows (its own row plus an additional two). Cell 1 and Cell 2 are thereby in the same row, while Cell 3 and Cell 4 form two independent rows.Confused? Well, it is not uncomplicated and it is easy to lose track. Therefore, it might be a good idea to draw the table on a piece of paper before you begin with the HTML.
Not confused? Then go ahead and create a couple of tables with both
colspan and rowspan on your own.How to create tables in an HTML document source:
<!DOCTYPE html>
<html>
<body>
<p>
Each table starts with a table tag.
Each table row starts with a tr tag.
Each table data starts with a td tag.
</p>
<h4>One column:</h4>
<table border="1">
<tr>
<td>Web design</td>
</tr>
</table>
<h4>One row and three columns:</h4>
<table border="1">
<tr>
<td>Web design</td>
<td>Graphic design</td>
<td>SEO</td>
</tr>
</table>
<h4>Two rows and three columns:</h4>
<table border="1">
<tr>
<td>Web design</td>
<td>Graphic design</td>
<td>SEO</td>
</tr>
<tr>
<td>Wordpress</td>
<td>Joomla</td>
<td>Internet marketing</td>
</tr>
</table>
</body>
</html>
This will produce following result:
Each table starts with a table tag. Each table row starts with a tr tag. Each table data starts with a td tag.Each table starts with a table tag. Each table row starts with a tr tag. Each table data starts with a td tag.
Each table starts with a table tag. Each table row starts with a tr tag. Each table data starts with a td tag.
One column:
Web design
|
One row and three columns:
Web design
|
Graphic design
|
SEO
|
Two rows and three columns:
Web design
|
Graphic design
|
SEO
|
Wordpress
|
Joomla
|
Internet marketing
|
How to create tables without borders:
<!DOCTYPE html>
<html>
<body>
<h4>This table has no borders:</h4>
<table>
<tr>
<td>Web design</td>
<td>Graphic design</td>
<td>SEO</td>
</tr>
<tr>
<td>Wordpress</td>
<td>Joomla</td>
<td>Internet marketing</td>
</tr>
</table>
<h4>And this table has no borders:</h4>
<table border="0">
<tr>
<td>Web design</td>
<td>Graphic design</td>
<td>SEO</td>
</tr>
<tr>
<td>Wordpress</td>
<td>Joomla</td>
<td>Internet marketing</td>
</tr>
</table>
</body>
</html>
This will produce following result:
This table has no borders:
Web design
|
Graphic design
|
SEO
|
Wordpress
|
Joomla
|
Internet marketing
|
And this table has no borders:
Web design
|
Graphic design
|
SEO
|
Wordpress
|
Joomla
|
Internet marketing
|
How to create table headers:
<!DOCTYPE html>
<html>
<body>
<h4>Table headers:</h4>
<table border="1">
<tr>
<th>Name</th>
<th>mobile</th>
<th>mobile</th>
</tr>
<tr>
<td>Belal hossain</td>
<td>01686471028</td>
<td>01728876754</td>
</tr>
</table>
<h4>Vertical headers:</h4>
<table border="1">
<tr>
<th>First Name:</th>
<td>Belal hossain</td>
</tr>
<tr>
<th>mobile:</th>
<td>01686471028</td>
</tr>
<tr>
<th>mobile:</th>
<td>01728876754</td>
</tr>
</table>
</body>
</html>
This will produce following result:
Table headers:
Name
|
mobile
|
mobile
|
Belal hossain
|
01686471028
|
01728876754
|
Vertical headers:
First Name:
|
Belal hossain
|
mobile:
|
01686471028
|
mobile:
|
01728876754
|
How to add a caption to a table:
<!DOCTYPE html>
<html>
<body>
<table border="1">
<caption>Our IT books</caption>
<tr>
<th>Book name</th>
<th>Prices</th>
</tr>
<tr>
<td>Mastering Html5</td>
<td>$80</td>
</tr>
<tr>
<td>CSS3</td>
<td>$60</td>
</tr>
</table>
</body>
</html>
This will produce following result:
Our IT books
| |
Book name
|
Prices
|
Mastering Html5
|
$80
|
CSS3
|
$60
|
How to define table cells that span more than one row or one column:
<!DOCTYPE html>
<html>
<body>
<h4>Cell that spans two columns:</h4>
<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Mobile</th>
</tr>
<tr>
<td>Belal hossain</td>
<td>01686471028</td>
<td>01728876754</td>
</tr>
</table>
<h4>Cell that spans two rows:</h4>
<table border="1">
<tr>
<th>First Name:</th>
<td>Belal hossain</td>
</tr>
<tr>
<th rowspan="2">Mobile:</th>
<td>01686471028</td>
</tr>
<tr>
<td>01728876754</td>
</tr>
</table>
</body>
</html>
This will produce following result:
Cell that spans two columns:
Name
|
Mobile
| |
Belal hossain
|
01686471028
|
01728876754
|
Cell that spans two rows:
First Name:
|
Belal hossain
|
Mobile:
|
01686471028
|
01728876754
|
How to display elements inside other elements:
<!DOCTYPE html>
<html>
<body>
<table border="1">
<tr>
<td>
<p>This is a paragraph</p>
<p>This is 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>
This will produce following result:
This is a paragraph
This is another paragraph
|
This cell contains a table:
| ||||
This cell contains a list
|
HELLO
|
How to use cellpadding to create more white space between the cell content and its borders:
<!DOCTYPE html>
<html>
<body>
<h4>Without cellpadding:</h4>
<table border="1">
<tr>
<td>Web design</td>
<td>Graphic design</td>
</tr>
<tr>
<td>SEO</td>
<td>Networking</td>
</tr>
</table>
<h4>With cellpadding:</h4>
<table border="1"
cellpadding="10">
<tr>
<td>Web design</td>
<td>Graphic design</td>
</tr>
<tr>
<td>SEO</td>
<td>Networking</td>
</tr>
</table>
</body>
</html>
This will produce following result:
Without cellpadding:
Web design
|
Graphic design
|
SEO
|
Networking
|
With cellpadding:
Web design
|
Graphic design
|
SEO
|
Networking
|
How to use cellspacing to increase the distance between the cells:
<!DOCTYPE html>
<html>
<body>
<h4>Without cellspacing:</h4>
<table border="1">
<tr>
<td>Web design</td>
<td>Graphic design</td>
</tr>
<tr>
<td>SEO</td>
<td>Networking</td>
</tr>
</table>
<h4>With cellspacing="0":</h4>
<table border="1" cellspacing="0">
<tr>
<td>Web design</td>
<td>Graphic design</td>
</tr>
<tr>
<td>SEO</td>
<td>Networking</td>
</tr>
</table>
<h4>With cellspacing="10":</h4>
<table border="1" cellspacing="10">
<tr>
<td>Web design</td>
<td>Graphic design</td>
</tr>
<tr>
<td>SEO</td>
<td>Networking</td>
</tr>
</table>
</body>
</html>
This will produce following result:
Without cellspacing:
Web design
|
Graphic design
|
SEO
|
Networking
|
With cellspacing="0":
Web design
|
Graphic design
|
SEO
|
Networking
|
With cellspacing="10":
Web design
|
Graphic design
|
SEO
|
Networking
|
Tables Backgrounds:
You can set table background using of the following two ways:
· Using bgcolor attribute - You can set background color for whole table or just for one cell.
· Using background attribute - You can set background image for whole table or just for one cell.
NOTE:You can set border color also using bordercolor attribute.
Here is an example of using bgcolor attribute:
<table border="5" bordercolor="green" bgcolor="gray">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td>
<td bgcolor="red">Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>
</table>
This will produce following result:
Column 1
|
Column 2
|
Column 3
|
Row 1 Cell 1
|
Row 1 Cell 2
|
Row 1 Cell 3
|
Row 2 Cell 2
|
Row 2 Cell 3
| |
Row 3 Cell 1
| ||
Here is an example of using background attribute:
<table border="1" background="/images/home.gif">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td>
<td bgcolor="red">Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3" background="/images/pattern1.gif">
Row 3 Cell 1
</td></tr>
</table>
This will produce following result:
Column 1
|
Column 2
|
Column 3
|
Row 1 Cell 1
|
Row 1 Cell 2
|
Row 1 Cell 3
|
Row 2 Cell 2
|
Row 2 Cell 3
| |
Row 3 Cell 1
| ||
Table height and width:
You can set a table width and height using width and height attrubutes. You can specify table width or height in terms of integer value or in terms of percentage of available screen area. Following is the example:
<table border="1" width="400" height="150">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
This will produce following result:
Row 1, Column 1
|
Row 1, Column 2
|
Row 2, Column 1
|
Row 2, Column 2
|
Using a Header, Body, and Footer:
Tables can be divided into three portions: a header, a body, and a foot. The head and foot are rather similar to headers and footers in a word-processed document that remain the same for every page, while the body is the main content of the table.
The three elements for separating the head, body, and foot of a table are:
· <thead> - to create a separate table header.
· <tbody> - to indicate the main body of the table.
· <tfoot> - to create a separate table footer.
A table may contain several <tbody> elements to indicate different pages or groups of data. But it is notable that <thead> and <tfoot> tags should appear before <tbody>
<table border="1" width="100%">
<thead>
<tr>
<td colspan="4">This is the head of the table</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4">This is the foot of the table</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
...more rows here containing four cells...
</tr>
</tbody>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
...more rows here containing four cells...
</tr>
</tbody>
</table>
This will produce following result:
| ||||||||||||||||||||||||
Nested Tables:
You can use one table inside another table. Not only tables you can use almost all the tags inside table data tag <td>.
Following is the example of using another table and other tags inside a table cell.
<table border="1">
<tr>
<td>
<table border="1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</td>
<td>
<ul>
<li>This is another cell</li>
<li>Using list inside this cell</li>
</ul>
</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
This will produce following result:
|
| ||||||
Row 2, Column 1
|
Row 2, Column 2
|
HTML Table Tags:
HTML <table> Tag
Example
A simple HTML table, containing two columns and two rows:
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
Definition and Usage
The <table> tag defines an HTML table.An HTML table consists of the <table> element and one or more <tr>, <th>, and <td> elements.
The <tr> element defines a table row, the <th> element defines a table header, and the <td> element defines a table cell.
A more complex HTML table may also include <caption>, <col>, <colgroup>, <thead>, <tfoot>, and <tbody> elements.
HTML <th> Tag
Example
A simple HTML table with two header cells and two data cells:
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
Definition and Usage
The <th> tag defines a header cell in an HTML table.An HTML table has two kinds of cells:
- Header cells - contains header information (created with the <th> element)
- Standard cells - contains data (created with the <td> element)
The text in <td> elements are regular and left-aligned by default.
Tips and Notes:
Tip: Use the colspan and rowspan attribute to let the content span over multiple columns or rows!HTML <tr> Tag
Example
A simple HTML table, containing two columns and two rows:
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
Definition and Usage
The <tr> tag defines a row in an HTML table.A <tr> element contains one or more <th> or <td> elements.
HTML <td> Tag
Example
A simple HTML table, with two table cells:
<table border="1">
<tr>
<td>Cell A</td>
<td>Cell B</td>
</tr>
</table>
<tr>
<td>Cell A</td>
<td>Cell B</td>
</tr>
</table>
Definition and Usage:
The <td> tag defines a standard cell in an HTML table.An HTML table has two kinds of cells:
- Header cells - contains header information (created with the <th> element)
- Standard cells - contains data (created with the <td> element)
The text in <td> elements are regular and left-aligned by default.
Tips and Notes
Tip: Use the colspan and rowspan attribute to let the content span over multiple columns or rows!HTML <caption> Tag
Example
A table with a caption:
<table border="1">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
Definition and Usage
The <caption> tag defines a table caption.The <caption> tag must be inserted immediately after the <table> tag.
You can specify only one caption per table.
Tip: By default, the table caption will be center-aligned above a table. However, the CSS properties "text-align" and"caption-side" can be used to align and place the caption.
HTML <colgroup> Tag
Example
Set the background color of the three columns with the <colgroup> and <col> tags:
<table border="1">
<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:yellow">
</colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
</table>
<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:yellow">
</colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
</table>
Definition and Usage
The <colgroup> tag specifies a group of one or more columns in a table for formatting.The <colgroup> tag is useful for applying styles to entire columns, instead of repeating the styles for each cell, for each row.
Note: The <colgroup> tag must be a child of a <table> element, after any <caption> elements and before any <thead>, <tbody>, <tfoot>, and <tr> elements.
Tip: To define different properties to a column within a <colgroup>, use the <col> tag within the <colgroup> tag.
HTML <col> Tag
Example
Set the background color of the three columns with the <colgroup> and <col> tags:
<table border="1">
<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:yellow">
</colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
</table>
<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:yellow">
</colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
</table>
Definition and Usage
The <col> tag specifies column properties for each column within a <colgroup> element.The <col> tag is useful for applying styles to entire columns, instead of repeating the styles for each cell, for each row.
HTML <thead> Tag
Example
An HTML table with a <thead>, <tfoot>, and a <tbody> element:
<table border="1">
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
Definition and Usage
The <thead> tag is used to group header content in an HTML table.The <thead> element is used in conjunction with the <tbody> and <tfoot> elements to specify each part of a table (header, body, footer).
Browsers can use these elements to enable scrolling of the table body independently of the header and footer. Also, when printing a large table that spans multiple pages, these elements can enable the table header and footer to be printed at the top and bottom of each page.
The <thead> tag must be used in the following context: As a child of a <table> element, after any <caption>, and <colgroup> elements, and before any <tbody>, <tfoot>, and <tr> elements.
Tips and Notes
Note: The <thead> element must have one or more <tr> tags inside.Tip: The <thead>, <tbody>, and <tfoot> elements will not affect the layout of the table by default. However, you can use CSS to style these elements.
HTML <tbody> Tag
Example
An HTML table with a <thead>, <tfoot>, and a <tbody> element:
<table border="1">
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
Definition and Usage
The <tbody> tag is used to group the body content in an HTML table.The <tbody> element is used in conjunction with the <thead> and <tfoot> elements to specify each part of a table (body, header, footer).
Browsers can use these elements to enable scrolling of the table body independently of the header and footer. Also, when printing a large table that spans multiple pages, these elements can enable the table header and footer to be printed at the top and bottom of each page.
The <tbody> tag must be used in the following context: As a child of a <table> element, after any <caption>, <colgroup>, and <thead> elements.
Tips and Notes
Note: The <tbody> element must have one or more <tr> tags inside.Tip: The <thead>, <tbody>, and <tfoot> elements will not affect the layout of the table by default. However, you can use CSS to style these elements.
HTML <tfoot> Tag
Example
An HTML table with a <thead>, <tfoot>, and a <tbody> element:
<table border="1">
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
Definition and Usage
The <tfoot> tag is used to group footer content in an HTML table.The <tfoot> element is used in conjunction with the <thead> and <tbody> elements to specify each part of a table (footer, header, body).
Browsers can use these elements to enable scrolling of the table body independently of the header and footer. Also, when printing a large table that spans multiple pages, these elements can enable the table header and footer to be printed at the top and bottom of each page.
The <tfoot> tag must be used in the following context: As a child of a <table> element, after any <caption>, <colgroup>, and <thead> elements and before any <tbody> and <tr> elements.
Tips and Notes
Note: The <tfoot> element must have one or more <tr> tags inside.Tip: The <thead>, <tbody>, and <tfoot> elements will not affect the layout of the table by default. However, you can use CSS to style these elements.
Definition and Usage
The <tfoot> tag is used to group footer content in an HTML table.The <tfoot> element is used in conjunction with the <thead> and <tbody> elements to specify each part of a table (footer, header, body).
Browsers can use these elements to enable scrolling of the table body independently of the header and footer. Also, when printing a large table that spans multiple pages, these elements can enable the table header and footer to be printed at the top and bottom of each page.
The <tfoot> tag must be used in the following context: As a child of a <table> element, after any <caption>, <colgroup>, and <thead> elements and before any <tbody> and <tr> elements.
Tips and Notes
Note: The <tfoot> element must have one or more <tr> tags inside.Tip: The <thead>, <tbody>, and <tfoot> elements will not affect the layout of the table by default. However, you can use CSS to style these elements.
No comments:
Post a Comment