Total Page Views :- webs counters

What is HTML Table

Tables are defined with the <table> tag.

A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag).
td stands for "table data," and holds the content of a data cell. A <td> tag can contain text, links, images, lists, forms, other tables, etc.

(How to create a Table)

		
<table>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

(How a Table Looks like on browser)

row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

HTML Table Tags

Tag Description
<table> Defines a table
<th> Defines a table header
<tr> Defines a table row
<td> Defines a table cell
<caption> Defines a table caption
<colgroup> Defines a group of columns in a table, for formatting
<col/> Defines attribute values for one or more columns in a table
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table

Table Attribute

AttributeUse
widthwidth of table or table cell
heightheight of table or table cell
alignalign text in table
valignvertically align text in table cell
borderborder width of table in px
bgcolorbackground color of table
cellspacinggap between table cells
cellpaddinggap inside table cells


Width in Table


(How to create a Width of Table)


<table width="200">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

(Browser View)

row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

Border in Table

Deprecated in HTML5, use css border.

To display a table with border, specify the width of border

(Create Table Border)


<table border="1px">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

(How a border of Table Looks like on browser)

row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

Cellspacing


Deprecated in HTML5, use css margin.

(How to create a cellspacing of Table)

<table border="1">
<tbody>
<tr>
<td>S No</td>
<td>Name</td>
</tr>
<tr>
<td>1</td>
<td>abc</td>
</tr>
<tr>
<td>2</td>
<td>xyz</td>
</tr>
</tbody></table>
</div>
<div style="border-right: 1px solid; float: left; height: 200px; width: 199px;">
Table with cellpspacing 0px
<br />
<table border="1" cellspacing="0">
<tbody>
<tr>
<td>S No</td>
<td>Name</td>
</tr>
<tr>
<td>1</td>
<td>abc</td>
</tr>
<tr>
<td>2</td>
<td>xyz</td>
</tr>
</tbody></table>
</div>
<div style="float: left; height: 200px; width: 199px;">
Table with cellpspacing 10px
<br />
<table border="1" cellspacing="10">
<tbody>
<tr>
<td>S No</td>
<td>Name</td>
</tr>
<tr>
<td>1</td>
<td>abc</td>
</tr>
<tr>
<td>2</td>
<td>xyz</td>
</tr>
</tbody></table>

(How the HTML code above looks in a browser)

CELLSPACING: Cellspacing is spacing between any two cells in a table.

For Exp,
Table with no cellspacing
S No Name
1 abc
2 xyz
Table with cellpspacing 0px
S No Name
1 abc
2 xyz
Table with cellpspacing 10px
S No Name
1 abc
2 xyz

Cellpadding

Deprecated in HTML5, use css padding.

(How to create a cellpadding of Table)


<span style="font-size: large;">CELPADDING: </span>Cellpadding means padding of text from the cell.<br />
<br />
For Exp<br />
<div align="center" style="background: #ccc; border: 1px double; height: 200px; width: 600px;">
<div style="border-right: 1px solid; float: left; height: 200px; width: 199px;">
Table with no cellpadding
<br />
<table border="1">
<tbody>
<tr>
<td>S No</td>
<td>Name</td>
</tr>
<tr>
<td>1</td>
<td>abc</td>
</tr>
<tr>
<td>2</td>
<td>xyz</td>
</tr>
</tbody></table>
</div>
<div style="border-right: 1px solid; float: left; height: 200px; width: 199px;">
Table with cellpadding 0px
<br />
<table border="1" cellpadding="0">
<tbody>
<tr>
<td>S No</td>
<td>Name</td>
</tr>
<tr>
<td>1</td>
<td>abc</td>
</tr>
<tr>
<td>2</td>
<td>xyz</td>
</tr>
</tbody></table>
</div>
<div style="float: left; height: 200px; width: 199px;">
Table with cellpadding 10px
<br />
<table border="1" cellpadding="10">
<tbody>
<tr>
<td>S No</td>
<td>Name</td>
</tr>
<tr>
<td>1</td>
<td>abc</td>
</tr>
<tr>
<td>2</td>
<td>xyz</td>
</tr>
</tbody></table>
</div>

(How the HTML code above looks in a browser)

CELPADDING: Cellpadding means padding of text from the cell.

For Exp
Table with no cellpadding
S No Name
1 abc
2 xyz
Table with cellpadding 0px
S No Name
1 abc
2 xyz
Table with cellpadding 10px
S No Name
1 abc
2 xyz

Align Attributes in Table

Deprecated in HTML5, use css text-align

Align text inside table

  1. Left
  2. Center
  3. Right

(How to create a Alignment of Table)


<table border="1px align="center">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

(How the HTML code above looks in a browser)

row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2


Background Color

Deprecated in HTML5, use css background-clor

(How to create a Background color of Table)


<table border="1px bgcolor="#FF0000">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

(How a background color of Table Looks like on browser)

row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

Table Header


Whithin a table row, are defined with the <th> tag .

All major browsers display the text in the <th> element as bold and centre aligned.

(How to create a Table Header in Table)


<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Kaushal</td>
<td>21</td>
</tr>
<tr>
<td>Shubh</td>
<td>20</td>
</tr>
</table>

(How a Table Header of Table Looks like on browser)

Name Age
Kaushal 21
Shubh 20