HTML Table

HTML table tag <table> is used to display data in tabular form such as row and column. There are many rows and columns in table.

How to use table elements in HTML ?

Table can be defined by <table> tag in HTML. Row in table can be defined by <tr> tag. Column in table can be defined by <td> tag, Header in table can be defined by <th> tag.

Also HTML table includes <caption>, <colgroup>, <col>, <thead>, <tfoot>, and <tbody> elements.

<table> tag defines table in HTML.
<tr> tag defines row for table in HTML.
<td> tag defines column for table in HTML.
<caption> tag defines caption for table in HTML.
<colgroup> tag specifies a group of one or more columns in a table for formatting.
<col> tag is used with <colgroup> element to specify column properties for each column.
<tbody> tag is used to group the body data in a table.
<thead> tag is used to group the header content in a table.
<tfooter> tag is used to group the footer data in a table.

Syntax :

<table width="100%" border="1" cellspacing="4" cellpadding="4">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

We can understand html table element by below example.

Example :

<table width="100%" border="1" cellspacing="4" cellpadding="4">
<tr>
<td colspan="5"><h3>Employees details in aryatechno. </h3></td>
</tr>
<tr>
<td width="12%" align="left" valign="middle"><strong>Employee Id </strong></td>
<td width="18%" align="left" valign="middle"><strong>Employee Name </strong></td>
<td width="19%" align="left" valign="middle"><strong>Address</strong></td>
<td width="20%" align="left" valign="middle"><strong>Contact Number </strong></td>
<td width="31%" align="left" valign="middle"><strong>Salary</strong></td>
</tr>
<tr>
<td align="left" valign="middle">AT001</td>
<td align="left" valign="middle">James </td>
<td align="left" valign="middle">2596 Losh Lane, Pennsylvania, Sewickley.</td>
<td align="left" valign="middle">620-202-2872</td>
<td align="left" valign="middle">$2000</td>
</tr>
<tr>
<td align="left" valign="middle">AT002</td>
<td align="left" valign="middle">Christopher William</td>
<td align="left" valign="middle">3029 Asylum Avenue, Wallingford, Connecticut</td>
<td align="left" valign="middle">760-630-2629</td>
<td align="left" valign="middle">$3000</td>
</tr>
<tr>
<td align="left" valign="middle">AT003</td>
<td align="left" valign="middle">Benjamin Duppstadt</td>
<td align="left" valign="middle">1493 Limer Street, Atlanta, Georgia</td>
<td align="left" valign="middle">404-542-8038</td>
<td align="left" valign="middle">$2500</td>
</tr>
<tr>
<td align="left" valign="middle">AT004</td>
<td align="left" valign="middle">Noah Davis</td>
<td align="left" valign="middle">2697 Boundary Street, Jacksonville, Florida-32202</td>
<td align="left" valign="middle">904-475-3598</td>
<td align="left" valign="middle">$1500</td>
</tr>
</table>

Output :