HTML Table

      No Comments on HTML Table

HTML Table is build using HTML <table> element.

HTML Table Tag

TagDescription
<table>Defines a table
<table>..</table>
<th>Defines a header cell in a table.Text in <th> is displayed in bold.
<table> <th>Header value </th> </table>
<tr>Defines a row in a table. It is the container for table data elements. A row is collection of cells.
<table> <tr> <td> data</td> </tr> </table>
<td>Defines a cell in a table.
<table> <td>data value </td> </table>
<caption>Defines a table caption.
<caption> caption..</caption>
<colgroup>Specifies a group of one or more columns in a table for formatting.Eg.
<colgroup> <col span="2" border="4"> </colgroup>
<col>Specifies column properties for each column within a <colgroup> element
<thead>Groups the header content in a table
<tbody>Groups the body content in a table
<tfoot>Groups the footer content in a table

Attributes for <table> element

Here we will discuss only the attribute in basic HTML

Colspan attribute

Colspan attribute defines the number of column that a cell should span.

Syntax:

<td colspan="value"></td>

Example:

<table border>
<tr>
   <td colspan="2">colors</td>
   <td>Unit</td>
</tr>
<tr>
    <td>red</td>
<td>Yellow</td>
   <td>2</td>
</tr>
</table>
colorsUnit
redYellow2

Rowspan attribute

rowspan attribute defines the number of rows that a cell should span.

Syntax:

<td rowspan="value"></td>

Example:

<table border>
<tr>
   <td rowspan="2">Class</td>  
</tr>
<tr>
   <td>3A</td>
   <td>2D</td>
</tr>
</table>
Class
3A2D

Bgcolor attribute

Add a background color to td or table elements.

<table bgcolor="yellow" border>
<tr>
   <th bgcolor="pink">colors</th>
   <th>Unit</th>
</tr>
<tr>
   <td>Green</td>
   <td>2</td>
</tr>
</table>
colorsUnit
Green2

Frame attribute

It is used to control the display of the outermost border of the table. It has precedence over the border attribute.
Syntax:

<table frame="value"></table>

Example:

<table  frame="hsides" border>
<tr>
   <th>colors</th>
   <th>Unit</th>
</tr>
<tr>
   <td>Green</td>
   <td>2</td>
</tr>
</table
colorsUnit
Green2

Values it can hold are:

ValueDescription
voidThe outside borders are not shown
aboveThe top outside border is shown
belowThe bottom outside border is shown
hsidesThe top and bottom outside borders are shown
vsidesThe left and right outside borders are shown
lhsThe left outside border is shown
rhsThe right outside border is shown
boxThe outside borders are shown on all four sides
borderThe outside borders are shown on all four sides

Border

The border attribute is used to define width of the table border. By default, table has no border. When we apply border attribute, a border appears. The default thickness of border is "1".

syntax:

<table border="value">

Example:

<table border="5">
<tr>
<td>One</td>
<td>Two</td>
</tr>
<tr>
<td>Three</td>
<td>Four</td>
</tr>
</table>
OneTwo
ThreeFour

Align

Sets horizontal alignment of the text.Possible values are Right, Left, Center.

Syntax:

<table align="value">

Width

Determines the width of the table. Possible value can be defined in terms of pixels or percentages. It can also be used to determine width of a column i-e in <td> element

Syntax:

<table width="value">

Cellpadding

Defines the space between the cell content and the border of the table.

<table cellpadding="value"></table>

.

Cellspacing

Defines space between two cells within the table.
Syntax:

<table cellspacing="value"></table>

Leave a Reply

Your email address will not be published. Required fields are marked *