image
  • 10th Jan 2023

HTML table tag, its Attributes & Other Child tag of table

  • Total View :2998
  • Posted By-Biswajit Swain

Table  is the combination of rows & columns. Cell is the intersection point of row & column where the actual data enters. Table is used to arrange data like text, images, links, other tables, etc. into a proper manner. <table>…….</table> tag defines an HTML table. Consists of one <table> element and one or more <tr>, <th>, and <td> elements.

TAGS

ATTRIBUTE

USES

EXAMPLE

<table>

 

Used to create table in a HTML

<table>

…………..
………….
</table>

<tr>

 

Used to create Table Row

<table>

<tr>

…………….

</tr>
</table>

<td>

 

Used to create Table Data

<table>

<tr>

<td>………</td>

</tr>
</table>

<th>

 

Used to define the table header

<table>

<tr>

<th>………</th>

</tr>
</table>

<table>

border

Specifies the border width

<table border=“10”>

……

</table>

<table>

align

Used to align the table in left, right or center

<table align=“right” >

……

</table>

<table>

width

Specifies the width of the table. Value must be in pixels or %.

<table width=“300” >

……

</table>

<table>

height

Specifies the height of the table. Value must be in pixels only.

<table height=“300” >

……

</table>

<table>

background

Add a background image for a table. Value may be local or remote URL

<table background=“tiger.jpg” >

……

</table>

<table>

bgcolor

Add a background Color for a table. Use Color Hex Code as value

<table bgcolor=“#F92C3D” >

……

</table>

<table>

cellpadding

Specifies the space between the cell borders and their contents. Value must be in Pixels

<table cellpadding=“10” >

……

</table>

<table>

cellspacing

Specifies the space between the cells. Value must be in Pixels.

<table cellspacing=“10” >

……

</table>

<table>

frame

Used in conjunction with the border attribute, specifies which side of the frame that makes up the border surrounding the table is displayed. Value may be void, above, below, hsides, lhs, rhs, vsides, box, border.

<table border=“1” frame=“above” >

……

</table>

<table>

rules

Used in conjunction with the border attribute, specifies which rules appear between the cells of the table. Value may be none, groups, rows, cols, all.

<table border=“1” rules=“rows” >

……

</table>

<td>

width

Specifies the width of the table cell. Value must be in pixels or %.

<table border=“1” >

<tr>

<td width=“45”>……….</td>

</tr>

</table>

<td>

height

Specifies the height of the table cell. Value must be in pixels or %.

<table border=“1” >

<tr>

<td height=“60”>……….</td>

</tr>

</table>

<td>

align

Specifies the horizontal alignment of the content in a cell. Value may be left, right, center or justify

<table border=“1” >

<tr>

<td align=“left”>……….</td>

</tr>

</table>

<td>

valign

Specifies the vertical alignment of the content in a cell. Value may be top, bottom, middle or baseline.

<table border=“1” >

<tr>

<td height=“60” valign=“top”>……….</td>

</tr>

</table>

<td>

background

Add a background image to a cell. Value may be local or remote URL.

<table border=“1” >

<tr>

<td background=“path”>……….</td>

</tr>

</table>

<td>

bgcolor

Add a background Color to a cell. Use Color Hex Code as value.

<table border=“1” >

<tr>

<td bgcolor=“#colHexCode”>……….</td>

</tr>

</table>

<td>

colspan

Use to merge two or more cells of different columns.

<table border=“1” >

<tr>

<td colspan=“2”>……….</td>

</tr>

</table>

<td>

rowspan

Use to merge two or more cells of different rows

<table border=“1” >

<tr>

<td rowspan=“2”>……….</td>

</tr>

</table>

<tr>

background

Add a background image to a row. Value may be local or remote URL

<table border=“1” >

<tr background=“path”>

<td>……….</td>

</tr>

</table>

<tr>

bgcolor

Add a background Color to a row. Use Color Hex Code as value

<table border=“1” >

<tr bgcolor=“#colHexCode”>

<td>……….</td>

</tr>

</table>

<tr>

align

Specifies the horizontal alignment of the content in a row. Value may be left, right, center or justify.

<table border=“1” >

<tr align=“right”>

<td>……….</td>

</tr>

</table>

<tr>

valign

Specifies the vertical alignment of the content in a row. Value may be top, bottom, middle or baseline

<table border=“1” height=“400” >

<tr valign=“top”>

<td>……….</td>

</tr>

</table>

<caption>

 

Defines a table caption. Must be inserted immediately after the <table> tag &  center aligned by default

<table border=“1” >

<caption>My Data</caption>

<tr>

<td>……….</td>

</tr>

</table>

<colgroup>

 

For applying formatting to entire columns, instead of repeating the styles for each cell, for each row. Must be a child of a <table> element, after any <caption> elements and before any <thead>, <tbody>, <tfoot>, and <tr> elements

<colgroup>

    <col bgcolor="green" width="100">

    <col background=“path">

 </colgroup>

<thead>, <tbody> & <tfoot>

 

Used to group header, body & footer content in an HTML table. These elements can enable the table header and footer to be printed at the top and bottom of each page.

<table border=“1” >

<thead>

……………

</thead>

</table>

 

 

  • Share:

Leave a Comment