Table

Using table we can represent a long and complex data into short and easy form. Data represented by table can be arranged in different layout easily. Also it can be it can be represented in a very attractive and beautiful way. Data arranged and represented in a table can be explained and understood easily.

A table contains row, column and cell. Tables are widely used in communication, research, and data analysis. Some basic uses of table are:-
  • Tables are useful for various tasks such as presenting text information and numerical data.
  • Tables can be used to compare two or more items in tabular form layout.
  • Tables are used to create databases.

Table in HTML

The HTML tables are created using the <table> tag in which the <tr> tag is used to create table rows and <td> tag is used to create data cells. The elements under <td> are regular and left aligned by default. To table heading <th> tag is used.

HTML Table Tags

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

Attributes of HTML table and its components

<table> Attributes

Attributes Value Description
align left, right, center Declared your horizontal alignment side.
width "size_px" Specify the Width Size of the Table.
height "size_px" Specify the Height Size of the Table.
bgcolor "purple" Specify the Background Color.
background "specified_URL" Specify the Background Image open for URL file.
border "size_px" Specify the size of border thickness.
bordercolor "yellow" Specify the color of border.
cellspacing "size_px" Specify the space between two Cell.
cellpadding "size_px" Specify the space between cell boundary and text.

<tr> Attributes

Attributes Value Description
bgcolor "purple" Specify the Background Color.
width "size_px" Specify the Width Size of the Table.
height "size_px" Specify the Height Size of the Table.

<th> and <td> Attributes

Attributes Value Description
align left, right, center Declared your horizontal alignment side.
valign top, middle, bottom Declared your vertical alignment side.
bgcolor "purple" Specify the Background Color.
colspan "Column_N" Specify the span of there column.
rowspan "Row_N" Specify the span of there Row.

Example

    <table rules="all" border="1" cellpadding="10">  
    <caption>Student Records</caption>  
    <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>  
    <tr><td>Vimal</td><td>Jaiswal</td><td>70</td></tr>  
    <tr><td>Mike</td><td>Warn</td><td>60</td></tr>  
    <tr><td>Shane</td><td>Warn</td><td>42</td></tr>  
    <tr><td>Jai</td><td>Malhotra</td><td>62</td></tr>  
    </table> 
Student Records
First_NameLast_NameMarks
VimalJaiswal70
MikeWarn60
ShaneWarn42
JaiMalhotra62


In the above example table rules attribute have following values:-

Attribute Values:

  • none: It does not create any lines.
  • groups: It create lines between row and column groups.
  • rows: It creates line between the rows.
  • cols: It creates line between the columns.
  • all: It creates line between the rows and columns.

Creating layout and design

In HTML table colspan and rowspan attributes can be used to define different-different layouts and designs. See the examples below:-

Example



<table border="1" cellspacing="0" cellpadding="10">
  <tr>
    <td width="128" rowspan="2"><p align="center"><strong>Name</strong></p></td>
    <td width="255" colspan="2"><p align="center"><strong>Timing</strong></p></td>
    <td width="128" rowspan="2"><p align="center"><strong>Date</strong></p></td>
    <td width="128" rowspan="2"><p align="center"><strong>Time</strong></p></td>
  </tr>
  <tr>
    <td width="128"><p align="center"><strong>Fom</strong></p></td>
    <td width="128"><p align="center"><strong>To</strong></p></td>
  </tr>
  <tr>
    <td width="128" valign="top"><p>&nbsp;</p></td>
    <td width="128" valign="top"><p>&nbsp;</p></td>
    <td width="128" valign="top"><p>&nbsp;</p></td>
    <td width="128" valign="top"><p>&nbsp;</p></td>
    <td width="128" valign="top"><p>&nbsp;</p></td>
  </tr>
  <tr>
    <td width="128" valign="top"><p>&nbsp;</p></td>
    <td width="128" valign="top"><p>&nbsp;</p></td>
    <td width="128" valign="top"><p>&nbsp;</p></td>
    <td width="128" valign="top"><p>&nbsp;</p></td>
    <td width="128" valign="top"><p>&nbsp;</p></td>
  </tr>
  <tr>
    <td width="128" valign="top"><p>&nbsp;</p></td>
    <td width="128" valign="top"><p>&nbsp;</p></td>
    <td width="128" valign="top"><p>&nbsp;</p></td>
    <td width="128" valign="top"><p>&nbsp;</p></td>
    <td width="128" valign="top"><p>&nbsp;</p></td>
  </tr>
  <tr>
    <td width="128" valign="top"><p>&nbsp;</p></td>
    <td width="128" valign="top"><p>&nbsp;</p></td>
    <td width="128" valign="top"><p>&nbsp;</p></td>
    <td width="128" valign="top"><p>&nbsp;</p></td>
    <td width="128" valign="top"><p>&nbsp;</p></td>
  </tr>
  <tr>
    <td width="128" valign="top"><p>&nbsp;</p></td>
    <td width="128" valign="top"><p>&nbsp;</p></td>
    <td width="128" valign="top"><p>&nbsp;</p></td>
    <td width="128" valign="top"><p>&nbsp;</p></td>
    <td width="128" valign="top"><p>&nbsp;</p></td>
  </tr>
  <tr>
    <td width="128" valign="top"><p>&nbsp;</p></td>
    <td width="128" valign="top"><p>&nbsp;</p></td>
    <td width="128" valign="top"><p>&nbsp;</p></td>
    <td width="128" valign="top"><p>&nbsp;</p></td>
    <td width="128" valign="top"><p>&nbsp;</p></td>
  </tr>
  <tr>
    <td width="128" valign="top"><p>&nbsp;</p></td>
    <td width="128" valign="top"><p>&nbsp;</p></td>
    <td width="128" valign="top"><p>&nbsp;</p></td>
    <td width="128" valign="top"><p>&nbsp;</p></td>
    <td width="128" valign="top"><p>&nbsp;</p></td>
  </tr>
  <tr>
    <td width="128" valign="top"><p>&nbsp;</p></td>
    <td width="128" valign="top"><p>&nbsp;</p></td>
    <td width="128" valign="top"><p>&nbsp;</p></td>
    <td width="128" valign="top"><p>&nbsp;</p></td>
    <td width="128" valign="top"><p>&nbsp;</p></td>
  </tr>
  <tr>
    <td width="128" valign="top"><p>&nbsp;</p></td>
    <td width="128" valign="top"><p>&nbsp;</p></td>
    <td width="128" valign="top"><p>&nbsp;</p></td>
    <td width="128" valign="top"><p>&nbsp;</p></td>
    <td width="128" valign="top"><p>&nbsp;</p></td>
  </tr>
  <tr>
    <td width="128" valign="top"><p>&nbsp;</p></td>
    <td width="128" valign="top"><p>&nbsp;</p></td>
    <td width="128" valign="top"><p>&nbsp;</p></td>
    <td width="128" valign="top"><p>&nbsp;</p></td>
    <td width="128" valign="top"><p>&nbsp;</p></td>
  </tr>
  <tr>
    <td width="128" valign="top"><p>&nbsp;</p></td>
    <td width="128" valign="top"><p>&nbsp;</p></td>
    <td width="128" valign="top"><p>&nbsp;</p></td>
    <td width="128" valign="top"><p>&nbsp;</p></td>
    <td width="128" valign="top"><p>&nbsp;</p></td>
  </tr>
</table>
<br>
<table border="1" cellspacing="0" cellpadding="10" width="641">
  <tr>
    <td width="128" valign="top"><p>&nbsp;</p></td>
    <td width="128" valign="top"><p>&nbsp;</p></td>
    <td width="128" valign="top"><p>&nbsp;</p></td>
    <td width="257" colspan="2" valign="top"><p>1</p></td>
  </tr>
  <tr>
    <td width="257" colspan="2" rowspan="2" valign="top"><p>2</p></td>
    <td width="128" valign="top"><p>&nbsp;</p></td>
    <td width="128" valign="top"><p>&nbsp;</p></td>
    <td width="128" valign="top"><p>&nbsp;</p></td>
  </tr>
  <tr>
    <td width="128" valign="top"><p>&nbsp;</p></td>
    <td width="128" valign="top"><p>&nbsp;</p></td>
    <td width="128" valign="top"><p>&nbsp;</p></td>
  </tr>
  <tr>
    <td width="128" valign="top"><p>&nbsp;</p></td>
    <td width="128" valign="top"><p>&nbsp;</p></td>
    <td width="385" colspan="3" valign="top"><p>3</p></td>
  </tr>
</table>

Name

Timing

Date

Time

Fom

To

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


 

 

 

1

2

 

 

 

 

 

 

 

 

3