What is a table?

  • Table is a structure which is used to store two dimensional information (eg. Excel)
  • It is a combination of rows and columns.

Characteristics of tabular data

  • Width of all columns will be same.
  • Height of all rows will be same.
  • Number of columns in each row should be same.
  • When we store any tabular information, generally the first row represents name of the column.

HTML table tag

  • For creating a table in html mainly four tags are used. The tags are as follows:
  • <table> – used to define the structure of the table
  • <th> – used to define the header of the table.
  • <tr> – used to define a row of the table.
  • <td> – used to define individual cells of the table.
  • Suppose we want to create a table of size 2×2 i.e. to create a table having 2 rows and two columns.
<html>
<head>
<title>Welcome</title>
</head>
<body>
<table>
<tr>
<td> 1 </td>
<td> 2 </td>
</tr>
<tr>
<td> 3 </td>
<td> 4 </td>
</tr>
</table>
</body>
</html>

Output:

1 2
3 4

Note: When we create a table, by default it will have following characteristics:

  • no border
  • aligned left
  • occupy width and height which is required to accommodate the text.

If we want to set these values, we need to use three attributes of <table> tag.

<html>
<head>
<title>Welcome</title>
</head>
<body>
<table border="1px" align="center" width="300px" height="300px">
<tr>
<td> 1 </td>
<td> 2 </td>
</tr>
<tr>
<td> 3 </td>
<td> 4 </td>
</tr>
</table>
</body>
</html>

Output:

1 2
3 4
  • Merging of cells
    • Many times it is required to merge columns or merge rows together. To achieve this we have to attributes : rowspan and colspan.
    • Rowspan : this attribute is used to merge rows together into one row. If we want to merge three rows then we need to assign the value 3 to this attribute.
    • Colspan : this attribute is used to merge columns together. If we want to merge two columns then we need to assign the value 2 to this attribute.

Examples:

Table – 1

<table border="1px" align="center" width="300px" height="200px">
<tr>
<td colspan="2"> 1 </td>
</tr>
<tr>
<td> 2</td>
<td> 3</td>
</tr>
</table>

Output:

1
2 3

Table – 2

<table border="1px" align="center" width="300px" height="200px">
<tr>
<td >1 </td>
<td> 2</td>
</tr>
<tr>
<td colspan="2"> 3 </td>
</tr>
</table>

Output:

1  2
3

Table – 3

<table border="1px" align="center" width="300px" height="200px">
<tr>
<td> 1 </td>
<td rowspan="2"> 2 </td>
</tr>
<tr>
<td> 3 </td>
</tr>
</table>

Output:

1 2
3

Table – 4

<tabl eborder="1px" align="center" width="300px" height="200px">
<tr>
<td rowspan="2"> 1 </td>
<td> 2 </td>
</tr>
<tr>
<td> 3 </td>
</tr>
</table>

Output:

1 2
3


Creating table for storing records

Generally when we store any data in a table, each cell of first row describes the name of that particular column. That data is considered to be table header and the tag used for it is <th> tag.

  • Characteristics of <th> tag.
  • Text written inside <th> tag is by default aligned to center.
  • Text is displayed in bold letters.

Sample program: 

<table border="1px" align="center" width="400px">
<tr>
<th> ID </th>
<th> NAME </th>
<th> CONTACT </th>
<th> EMAIL </th>
</tr>
<tr>
<td> 1 </td>
<td> Ankit Virparia </td>
<td> 9925720005 </td>
<td> ankit@ankit.co </td>
</tr>
<tr>
<td> 2 </td>
<td> Sonali Virparia </td>
<td> 9925720005</td>
<td> sonali@ankit.co</td>
</tr>
</table>

Output:

ID NAME CONTACT EMAIL
1 Ankit Virparia 9925720005 ankit@ankit.co
2 Sonali Virparia 9925720005 sonali@ankit.co