Print
HTML

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

Tables in HTML

HTML Css(Cascading Style Sheets)

Forms in HTML

Different CSS Properties

 Go Back to HTML Questions