Tables are common fixtures in printed documents, books, and of course web documents. Tables provide a highly readable way of presenting many kinds of information.
A table is a matrix of rows and columns, in which each intersection of row and column is called a cell. The cells in the top row often contain column labels; those in the leftmost column often contain row labels; 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, headings, horizontal rules, images, and nested tables.
Basic structure:
A table is specified as the content of the block tag <table>. The most common attribute for the <table> tag is border. There are two kinds of lines in tables, the line around the outside of the whole table is called the border, and the lines that separate the cells from each other are called rules. A table that does not include the border attribute will be a matrix of the cells with neither a border nor rules. The browser has default widths for table borders and rules which is used if the border attribute is assigned the value “border”. Otherwise, a number can be given as border’s value, which specifies the border width in pixels. For example, border=”3” specifies a border 3 pixels wide. A border value of 0 specifies no border and no rules. The rule lines are set at 1 pixel when any non-zero border value is specified. All table borders are beveled to give three-dimensional appearance, although this is ineffective when narrow border widths are used.
The cells of a table are specified on row at a time. Each row of a table is specified with a row tag, <tr>. Within each row, the row label is specified by the table heading tag, <th>. Each data cell of a row is specified the table data tag, <td>.
<html>
<body>
<table border="1">
<caption> tables</caption>
<tr>
<th> row 1</th>
<td> 1</td>
<td> 2</td>
<td> 3</td>
<td> 4</td>
<td> 5</td>
</tr>
<tr>
<th> row 2</th>
<td> 6</td>
<td> 7</td>
<td> 8</td>
<td> 9</td>
<td> 10</td>
</tr>
<tr>
<th> row 3</th>
<td> 11</td>
<td> 12</td>
<td> 13</td>
<td> 14</td>
<td> 15</td>
</tr>
</table>
</body>
</html>
Rowspan and colspan attributes: -
In many cases, tables have multiple levels of row or column labels in which on label covers two or more secondary labels.
The colspan attributes specification in a table header or table data tag tells the browser to make the cell as wide as the specified number of rows.
If there are fewer cells in the rows above or below the spanning cell than the colspan attribute specifies, the browser stretches the spanning cell over the number of cells that populate the column in the table. The rowspan attribute of the table heading and table data tags does for rows what colspan does for columns.
A table that has two levels of column labels and also has row labels must have an empty upper-left corner cell that spans both the multiple rows of column labels and the multiple columns. Such a cell is specified by including both rowspan and colspan attributes.
Align and valign attributes: - 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. If align is specified in a <tr> tag, it applies to all of the cells in the row. If it is included in a <th> or <td> tag, it only applies to that cells.
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. Because valign applies only to a single cell, there is never any point in specifying center.
Cellpadding and cellspacing attributes: - The table tag has two attributes that can be used to specify the spacing between the content of a table cell and the cell’s edge and the spacing between adjacent cells. The cellpadding attribute is used to specify the spacing between the content of a cell and the inner walls of the cell. This is often used to prevent text in a cell from being too close to the edge of the cell. The cellspacing attribute is used to specify the distance between cells in a table.
If you like content please share and comment your opinion from below comment section.. thankyou for visiting our site..
Post a Comment