Raj Kumar Tables in HTML (rowspan and colspan, align and valign, cellpadding and cellspacing, Sections)
Explanation
1627
0
A table is a matrix of cells. The cells in the top row often contain column labels, those in the leftmost
column often contain row labels, and most of the rest of the cells contain the data of the table. The content of
a cell can be almost any document element, including text, a heading, a horizontal rule, an image, and a
nested table.
Basic Table Tags
➤A table is specified as the content of the block tag <table>.
➤There are two kinds of lines in tables: the line around the outside of the whole table is called the border; the lines that separate the cells from each other are called rules.
➤It can be obtained using border attribute. The possible values are “border” or any number.
➤The table heading can be created using <caption> tag.
➤The table row can be created using <tr> tag.
➤The column can be created either by using <th> tag (stands for table header which is suitable for headings) or <td> tag (stands for table data which is suitable for other data).
➤The placement of the content within a table cell can be specified with the align and valign attributes in the <tr>, <th>, and <td> tags.
➤The align attribute has the possible values left, right, and center, with the obvious meanings for horizontal placement of the content within a cell.
➤The default alignment for th cells is center; for td cells, it is left. The valign attribute of the <th> and <td> tags has the possible values top and bottom.
➤The default vertical alignment for both headings and data is center.
The cellpadding and cellspacing Attributes:
Cellspacing is the distance between cells. Cellpadding is the distance between the edges of the cell to its content.
Table Sections:
➤ Tables naturally occur in two and sometimes three parts: header, body, and footer. (Not all tables have a natural footer.)
➤ These three parts can be respectively denoted in XHTML with the thead, tbody, and tfoot elements.
➤ The header includes the column labels, regardless of the number of levels in those labels.
➤ The body includes the data of the table, including the row labels.
➤ The footer, when it appears, sometimes has the column labels repeated after the body.
➤ In some tables, the footer contains totals for the columns of data above.
➤ A table can have multiple body sections, in which case the browser may delimit them with horizontal lines that are thicker than the rule lines within a body section.
Basic Table Tags
➤A table is specified as the content of the block tag <table>.
➤There are two kinds of lines in tables: the line around the outside of the whole table is called the border; the lines that separate the cells from each other are called rules.
➤It can be obtained using border attribute. The possible values are “border” or any number.
➤The table heading can be created using <caption> tag.
➤The table row can be created using <tr> tag.
➤The column can be created either by using <th> tag (stands for table header which is suitable for headings) or <td> tag (stands for table data which is suitable for other data).
<html>
<head>
<title> Table with text and image </title>
</head>
<body>
<table border = "border">
<caption>VTU Memo </caption>
<tr>
<th> VTU </th>
<th> Image </th>
</tr>
<tr>
<td> Funny image </td>
<td> <img src = "img(13).jpg" alt = "cant display"/></td>
</tr>
<tr>
<td> True Story </td>
<td> <img src = "img(19).jpg" alt = "cant display"/></td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title>row-span and column-span</title>
</head>
<body>
<p> Illustration of Row span</p>
<table border="border">
<tr>
<th rowspan="2"> ATME</th>
<th>ISE</th>
</tr>
<tr>
<th>CSE</th>
</tr>
</table>
<p> Illustration of Column span</p>
<table border="border">
<tr>
<th colspan="2"> ATME </th>
</tr>
<tr>
<th>ISE</th>
<th>CSE</th>
</tr>
</table>
</body>
</html>
➤The placement of the content within a table cell can be specified with the align and valign attributes in the <tr>, <th>, and <td> tags.
➤The align attribute has the possible values left, right, and center, with the obvious meanings for horizontal placement of the content within a cell.
➤The default alignment for th cells is center; for td cells, it is left. The valign attribute of the <th> and <td> tags has the possible values top and bottom.
➤The default vertical alignment for both headings and data is center.
<html>
<head>
<title> Align and valign </title>
</head>
<body>
<p>Table having entries with different alignments</p>
<table border="border">
<tr align = "center">
<th> </th>
<th> Column Label </th>
<th> Another One </th>
<th> Still Another </th>
</tr>
<tr>
<th> Align </th>
<td align = "left"> Left</td>
<td align = "center"> Center </td>
<td align = "right"> right </td>
</tr>
<tr>
<th> <br/>Valign<br/><br/><br/></th>
<td> Deafult </td>
<td valign = "top"> Top</td>
<td valign = "bottom"> Bottom</td>
</tr>
</table>
</body>
</html>
The cellpadding and cellspacing Attributes:
Cellspacing is the distance between cells. Cellpadding is the distance between the edges of the cell to its content.
<html>
<head>
<title> cell spacing and cell padding </title>
</head>
<body>
<h3>Table with space = 10, pad = 50</h3>
<table border = "7" cellspacing = "10" cellpadding = "50">
<tr>
<td> Kswamy</td>
<td>Chethan </td>
</tr>
</table>
<h3>Table with space = 50, pad = 10</h3>
<table border = "7" cellspacing = "50" cellpadding = "10">
<tr>
<td> Divya </td>
<td>Chethan </td>
</tr>
</table>
</body>
</html>
Table Sections:
➤ Tables naturally occur in two and sometimes three parts: header, body, and footer. (Not all tables have a natural footer.)
➤ These three parts can be respectively denoted in XHTML with the thead, tbody, and tfoot elements.
➤ The header includes the column labels, regardless of the number of levels in those labels.
➤ The body includes the data of the table, including the row labels.
➤ The footer, when it appears, sometimes has the column labels repeated after the body.
➤ In some tables, the footer contains totals for the columns of data above.
➤ A table can have multiple body sections, in which case the browser may delimit them with horizontal lines that are thicker than the rule lines within a body section.
Share:
Raj Kumar
Computer Science And Engineering
Raj Kumar