Use the
tag for each cell you want to designate as a table header cell (here, this includes Item, Description, Price). This can be the top of a row or column. The specific cell content must be enclosed in a tag. By default, browsers bold text in header cells. Use the | tag for table data. It marks individual cells in a table. Like the | tag, it wraps specific cell contents.
To review, the tag nesting structure of the table is as follows:
1. The table header < head > and table body < body > tags go inside the table tag < table >
2. Table rows < tr > always go inside the table header tag or table body tag as appropriate
3. Table header cells | and table data | tags always run
Use < table border="1" > for
Create a pixel border that makes the table visible. The colspan or rowspan attributes can be used to span cells across multiple columns or rows. inside table rows
4. Cell data always goes inside the table cell header < th > or table data < td > tag
The caption tag is used to add a caption or title inside a table. The default text alignment of the caption is center. The caption tag is always used as the first child of a table element. Thus tr, thead, tbody or tfoot are used after the table caption. Following is a list of table attributes with usage.
Table Caption
row 1, cell 1 |
row 1, cell 2 |
row 2, cell 1 |
row 2, cell 2 |
HTML Code
< table >
< caption >Table Caption< /caption >
< 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 >
In HTML tables, the width attribute was used to set the width of the table. In HTML5, the width attribute is removed. The CSS Width property is used to set the width of a table in HTML5. The width attribute can overflow the table even in mobile devices because the width of the screen is less than the width of the table.
How to set the width of the table.
row 1, cell 1 |
row 1, cell 2 |
row 2, cell 1 |
row 2, cell 2 |
Here is theexample:
< table width="500" >
< 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 >
Table Border attribute is used to show the border of the table. The border attribute value specifies the width of the border. The default table limit is zero. The table border can have any numeric value.
Table Border Examples
Table Border(border="1")
row 1, cell 1 |
row 1, cell 2 |
row 2, cell 1 |
row 2, cell 2 |
Table Border(border="5")
row 1, cell 1 |
row 1, cell 2 |
row 2, cell 1 |
row 2, cell 2 |
< 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 >
< table border="5" >
< 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 >
Table Border in HTML5
To add a table border in HTML5, use CSS border property.
< style >
table, td, th{ border:solid 1px gray;}
< /style >
The cellspacing attribute in a table is used to set the margin between the table cell and the table border. The default cellspacing is 2. Using the cellspacing attribute, we can change the margin between two cells.
Examples
With Default cellspacing
row 1, cell 1 |
row 1, cell 2 |
row 2, cell 1 |
row 2, cell 2 |
With cellspacing (cellspacing="0")
row 1, cell 1 |
row 1, cell 2 |
row 2, cell 1 |
row 2, cell 2 |
With cellspacing (cellspacing="10")
row 1, cell 1 |
row 1, cell 2 |
row 2, cell 1 |
row 2, cell 2 |
< table border='2' >
< caption >With Default cellspacing< /caption >
< 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 >
< table border='2' cellspacing='0' >
< caption >With cellspacing (cellspacing="0") < /caption >
< 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 >
< table border='2' cellspacing='10' >
< caption >With cellspacing (cellspacing="10") < /caption >
< 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 >
Cell padding refers to the padding of text or content inside a table cell from the table border. Just like css padding. The default cell padding is 1.
default cellpadding (cellpadding="1")
row 1, cell 1 |
row 1, cell 2 |
row 2, cell 1 |
row 2, cell 2 |
with cellpadding (cellpadding="0")
row 1, cell 1 |
row 1, cell 2 |
row 2, cell 1 |
row 2, cell 2 |
with cellpadding (cellpadding="10")
row 1, cell 1 |
row 1, cell 2 |
row 2, cell 1 |
row 2, cell 2 |
< table border='2' cellpadding='1px' class='table table-bordered' >
< caption >with cellpadding (cellpadding="1")< /caption >
< 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 >
< table border='2' cellpadding='0px' class='table table-bordered' >
< caption >with cellpadding (cellpadding="0")< /caption >
< 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 >
< table border='2' cellpadding='10px' class='table table-bordered' >
< caption >with cellpadding (cellpadding="10")< /caption >
< 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 >
The colspan attribute is used to merge two or more columns into one. Thus we can have rows with different number of columns. Colspan has a minimum value of 2 and a default value of 1.
S No |
Name |
Email address |
Marks |
1 |
example |
example@domain.com |
85 |
2 |
example |
example@domain.com |
75 |
Total |
160 |
< table border="1" >
< tr >
< th > S No< /th >
< th > Name< /th >
< th > Email address< /th >
< th > Marks< /th >
< /tr >
< tr >
< td > 1< /td >
< td > example< /td >
< td > example@domain.com< /td >
< td > 85< /td >
< /tr >
< tr >
< td > 2< /td >
< td > example< /td >
< td > example@domain.com< /td >
< td > 75< /td >
< /tr >
< tr >
< td colspan="3 > Total< /td >
< td > 160< /td >
< /tr >
< /table >
The Rowspan attribute can merge two or more rows in a table. The default value of Rowspan is 1, and the minimum assigned value of Rowspan is 2.
RowSpan |
Name |
Email address |
Marks |
example |
example@domain.com |
85 |
example |
example@domain.com |
75 |
total |
160 |
HTML Code:
< table border='2' class='table table-bordered' >
< tr >
< th rowspan='4' >RowSpan< /th >
< th >Name< /th >
< th >Email address< /th >
< th >Marks< /th >
< /tr >
< tr >
< td >example< /td >
< td >example@domain.com< /td >
< td >85< /td >
< /tr >
< tr >
< td >example< /td >
< td >example@domain.com< /td >
< td >75< /td >
< /tr >
< tr >
< td colspan='2' >total< /td >
< td >160< /td >
< /tr >
< /table >
The align attribute is used to align text inside a table tag, tr, or td. Center align for a table Can also center align the entire table.
Example
align="center"
row 1, cell 1 |
row 1, cell 2 |
row 2, cell 1 |
row 2, cell 2 |
HTML Code:
< table border='2' class='table table-bordered' style='text-align: center;' >
< caption >align="center"< /caption >
< 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 >
The bgcolor attribute of a table is used to set the background color of the table.
Example
bgcolor="#FF0000"
row 1, cell 1 |
row 1, cell 2 |
row 2, cell 1 |
row 2, cell 2 |
HTML Code:
< table border='2' bgcolor='#FF0000' >
< caption >bgcolor="#FF0000"< /caption >
< 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 >
The th part of the table heading is the cell used inside the table row with the < th > tag. All < th > are bold and center-aligned because they are used to display heading cells.
Example
row 1, cell 1 |
row 1, cell 2 |
row 2, cell 1 |
row 2, cell 2 |
HTML Code:
< table border='2' >
< tr >
< th >row 1, cell 1< /th >
< th >row 1, cell 2< /th >
< /tr >
< tr >
< td >row 2, cell 1< /td >
< td >row 2, cell 2< /td >
< /tr >
< /table >
Here the source of the articles from the entire website are listed below.
If you have any questions about the site, advertising and any other issues, please feel free to contact me at akmbirra@gmail.com
|