The <th> tag is used to define a header cell within an HTML table in webpage.
The <th> element is used in conjunction with the <tr> and <td> tags in the table tag to specify row and columns in the table.It is an HTML5 tag.It has opening and closing tags.
There are two types of cell In an HTML table:-
1.Header cell-that contains information created with the <th> tag and the text in this section is by default bold and centered.
2.Standard cells- contains data created with the <td> tag and the text in this tag is by default regular and left-aligned. We use colspan and rowspan attributes to merge columns and rows respectively.
Optional Attributes :- align|axis|char|charoff|colspan|rowspan|bgcolor|headers|heights|nowrap|scope|valign|width
Some of these attributes are not supported in HTML5 (width|valign|nowrap|height|headers|charoff|char|bgcolor|axis|align).
You can understand use of <th> tag by a simple example:-
Conclusion:--
There are two types of cell In an HTML table:-
1.Header cell-that contains information created with the <th> tag and the text in this section is by default bold and centered.
2.Standard cells- contains data created with the <td> tag and the text in this tag is by default regular and left-aligned. We use colspan and rowspan attributes to merge columns and rows respectively.
Optional Attributes :- align|axis|char|charoff|colspan|rowspan|bgcolor|headers|heights|nowrap|scope|valign|width
Some of these attributes are not supported in HTML5 (width|valign|nowrap|height|headers|charoff|char|bgcolor|axis|align).
You can understand use of <th> tag by a simple example:-
e.g.1
<!DOCTYPE html>
<html>
<head>
<title>use of th tag</title>
</head>
<body>
<table border="1" width="100%">
<caption>Earnings</caption>
<tr> <th>Day</th> <th>Earning</th> </tr>
<tr> <td>Monday</td> <td>$150</td> </tr>
<tr> <td>Tuesday</td> <td>$200</td> </tr>
</table>
</body> </html>
Result:-
By using caption tag you can add caption at top of table.
e.g.2
You can merge columns by using colspan.
just like <th colspan="2or3or4...">
<!DOCTYPE html>
<html>
<head>
<title>use of th tag</title>
</head>
<body>
<table class="tg">
<tr> <th>Attribution</th> <th colspan="2">Value</th> </tr>
<tr> <td>Align</td> <td>Left</td> <td>Right</td> </tr>
</table>
</body>
</html>
Result:-
e.g.3
You can merge rows by using rowspan.
just like <th rowspan="2or3or4...">
<!DOCTYPE html>
<html>
<head>
<title>use of th tag</title>
</head>
<body>
<table class="tg">
<tr> <th">Attribution</th> <th>value</th> </tr>
<tr> <td class="tg-031e" rowspan="2">align</td> <td class="tg-031e">right</td> </tr>
<tr> <td class="tg-031e">left</td> </tr>
</table>
</body>
</html>
Result:-
<!DOCTYPE html>
<html>
<head>
<title>use of th tag</title>
</head>
<body>
<table border="1" width="100%">
<caption>Earnings</caption>
<tr> <th>Day</th> <th>Earning</th> </tr>
<tr> <td>Monday</td> <td>$150</td> </tr>
<tr> <td>Tuesday</td> <td>$200</td> </tr>
</table>
</body> </html>
Result:-
| Day | Earning |
|---|---|
| Monday | $150 |
| Tuesday | $200 |
By using caption tag you can add caption at top of table.
e.g.2
You can merge columns by using colspan.
just like <th colspan="2or3or4...">
<!DOCTYPE html>
<html>
<head>
<title>use of th tag</title>
</head>
<body>
<table class="tg">
<tr> <th>Attribution</th> <th colspan="2">Value</th> </tr>
<tr> <td>Align</td> <td>Left</td> <td>Right</td> </tr>
</table>
</body>
</html>
Result:-
| Attribution | Value | |
|---|---|---|
| Align | Left | Right |
e.g.3
You can merge rows by using rowspan.
just like <th rowspan="2or3or4...">
<!DOCTYPE html>
<html>
<head>
<title>use of th tag</title>
</head>
<body>
<table class="tg">
<tr> <th">Attribution</th> <th>value</th> </tr>
<tr> <td class="tg-031e" rowspan="2">align</td> <td class="tg-031e">right</td> </tr>
<tr> <td class="tg-031e">left</td> </tr>
</table>
</body>
</html>
Result:-
| Attribution | value |
|---|---|
| align | right |
| left |
Conclusion:--
So the <th> tag is used to define a header cell within an HTML table in webpage.By using colspan and rowspan we can merge columns and rows respectively.
0 comments:
Post a Comment