HTML Tables
Cellpadding Attribute
Cellpadding Attribute
The cellpadding attribute specifies the space, in pixels, between the cell wall and the cell content.
Example
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<p>Table without cellpadding:</p>
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
<br>
<p>Table with cellpadding:</p>
<table cellpadding="10" >
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
</body>
</html>
HTML Document Output
Table without cellpadding:
| Month | Savings |
|---|---|
| January | $100 |
| February | $80 |
Table with cellpadding:
| Month | Savings |
|---|---|
| January | $100 |
| February | $80 |
Cellspacing Attribute
Cellspacing Attribute
The cellspacing attribute specifies the space, in pixels, between cells.
The cellspacing attribute of <table> is not supported in HTML5.
Example
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<p>Table without cellspacing:</p>
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
<br>
<p>Table with cellspacing:</p>
<table cellspacing="10" >
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
</body>
</html>
HTML Document Output
Table without cellspacing:
| Month | Savings |
|---|---|
| January | $100 |
| February | $80 |
Table with cellspacing:
| Month | Savings |
|---|---|
| January | $100 |
| February | $80 |
Colspan and Rowspan Attributes
Colspan and Rowspan Attributes
Colspan
The colspan attribute defines the number of columns a cell should span.
Rowspan
The rowspan attribute specifies the number of rows a cell should span.
Example
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<tr rowspan = "2"> Row 1 Cell 1</td>
<td>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 = "2">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>
HTML Document Output
| 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 Caption
Table Caption
Table Height
The caption tag will serve as a title or explanation for the table and it shows up at the top of the table. This tag is deprecated in newer version of HTML/XHTML.
Example
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<caption>This is the caption</caption>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<tr> Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
</table>
</body>
</html>
HTML Document Output
| Column 1 | Column 2 | Column 3 |
|---|---|---|
| Row 1 Cell 1 | Row 1 Cell 2 | Row 1 Cell 3 |
Table Header, Body, and Footer
Table Header, Body, and Footer
Table Height
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 holder 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.
Example
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table 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>
</tbody>
</table>
</body>
</html>
HTML Document Output
| This is the head of the table | |||
| This is the foot of the table | |||
| Cell 1 | Cell 2 | Cell 3 | Cell 4 |
Table Heading
Table Heading
Table heading can be defined using <th> tag. This tag will be put to replace <td> tag, which is used to represent actual data cell. Normally you will put your top row as table heading as shown below, otherwise you can use <th> element in any row. Headings, which are defined in <th> tag are centered and bold by default.
Example
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
</body>
</html>
HTML Document Output
| Month | Savings |
|---|---|
| January | $100 |
| February | $80 |
Table Height and Width
Table Height and Width
Table Height
- The width attribute specifies the width of a table.
- If the width attribute is not set, a table takes up the space it needs to display the table data.
Table Width
- The height attribute specifies the height of a cell.
- Normally, a cell takes up the space it needs to display the content. The height attribute is used to set a predefined height of a cell.
Example
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table border = "1" width = "400" height = "150" >
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<tr> Row 1 Cell 1</td>
<td>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>
<td>Row 2 Cell 3</td>
</tr>
</table>
</body>
</html>
HTML Document Output
| 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 2 Cell 3 |
0 Reviews:
Post a Comment
If you have any doubts, Let me know, Please!