Tables in HTML
The tables are used to arrange data (i.e. text, images & other content) in rows and columns. But most frequently, tables are used as a layout device to divide WebPages into different sections like header, footer, right and left column, main center content and so on.
The Basic Structure of an HTML Table:
To create a table basically, we need three HTML elements: TABLE, TR (Table Row) and TD (Table Data).
The general syntax for creating a table is as follows:
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
You May Also Like
Features of HTML
Structure of HTML Document
HTML Formatting Tags
Different Types of Lists in HTML
The different attributes of table tag are as follows:
The most frequently used attributes for the TABLE tag are: ALIGN, BORDER, WIDTH, HEIGHT, CELLPADDING and CELLSPACING.
ALIGN: By default, a table is aligned to the left margin. This attribute is used to change the alignment of the table. The possible values: left / right / center.
BORDER: This attribute is used to specify the thickness of the table border in pixels, default is 0. The default for border color and style is a grey solid border with shadows and only the outside border takes the thickness specified with the BORDER attribute, while the borders around each single table cell are only 1 pixel thick.
WIDTH and HEIGHT: these two attributes define a table´s width and height, either with an absolute value in pixels or a relative value (percentage). So a value of 70 means an absolute width/height of 70 pixels and 70% means 70% of the available horizontal/vertical space.
CELLPADDING and CELLSPACING: The attribute CELLPADDING describes the space in pixels between a table cell´s border and its content while the attribute CELLSPACING describes the space in pixels between the different table cells. These spaces are always equally applied to all four sides.
BACKGROUND: This attribute is used to specify background picture for the table. The value for this attribute is the filename of the image.
BGCOLOR: This attribute is used to specify background color for the table. The value for this attribute is RGB color specification or hexadecimal color code.
TABLE ROW - <TR> .. </TR>:
To start a table row, the tr tags must appear within the table tags.
TABLE CELL - <TD> .. </TD>:
A table cell is where the content goes. Cells must exist within rows, where the number of cells in a row determines the number of columns in the table. Cell properties can be set using the attributes:
Align: Alignment of text in the cell: left, center or right.
Valign: Vertical alignment of the cell: top, middle or bottom.
Width: Specify a fixed width of a cell, by default they will only take up as much space as they need.
Colspan: Column spanning allows a cell to take up more than one column, in order to match layouts of other rows. Replace ? with the number of columns to span.
Rowspan: Row spanning, similar to column spanning, forces a cell to occupy more than one row.
Nowrap: No text in the cell will be wrapped onto the next line. Similar to the nobr tag for paragraphs
Example:
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>10000</td>
</tr>
<tr>
<td>February</td>
<td>30000</td>
</tr>
</table>
You May Also Like
HTML Css(Cascading Style Sheets)
