1 of 12

HTML TABLES

2 of 12

Introduction

  • Introduced in HTML 3.2
  • Used to display data in two-dimensional tabular format.
  • Powerful tool for formatting web pages using navigation panel on left side of browser.

HTML Table Tags

​

​

Tag

Meaning

<table>----</table>

To create table

Or

To represent entire table

<tr>-------</tr>

Represent table row

<td>----------</td>

Represent a cell in a row

<th>----------</th>

Column header

<caption>--------</caption>

Title of the table

3 of 12

​

<table>-----------</table>

<tr>------</tr>

<tr>------</tr>

Table or row can not contain data…to add data cells should be created within each row.

<tr> <td>--</td> <td>--</td> <td>--</td> </tr>

<tr> <td>--</td> <td>--</td> <td>--</td> </tr>

<tr> <td>--</td> <td>--</td> <td>--</td> </tr>

4 of 12

Example

<!DCOCTYPE html>

<html>

<head>

<title> HTML Table Tag Example</title

</head>

<body>

<table>

<tr> <td>82</td> <td>80</td> </tr>

<tr> <td>80</td> <td>75</td> </tr>

</table>

</body>

</html>

​

  • Each row of this table contains the marks of one student…
  • This simple table is created using <table>, <tr> and<td> primary tags..

5 of 12

Border tag

!DCOCTYPE html>

<html>

<head>

<title> HTML Table Tag Example</title

</head>

<body>

<table border="1">

<tr> <td>82</td> <td>80</td> </tr>

<tr> <td>80</td> <td>75</td> </tr>

</table>

</body>

</html>

  • The attribute “border” specifies that a border has to be used.
  • Its value indicates the thickness of the outermost table boundary in pixels.
  • Value 0 indicates no border.

Adding a table border also adds boundaries of 1 pixel thick to all the cells individually.

Note: Thickness of individual boundaries can not change.

6 of 12

Row & Column Header

<!DCOCTYPE html>

<html>

<head>

<title> HTML Table Tag Example</title

</head>

<body>

<table border="1">

<tr> <th> Student Name </th><th>OS</th> <th>OOPS</th> </tr>

<tr> <td>sujay</td> <td>82</td> <td>80</td> </tr>

<tr> <td>Tulasi</td><td>80</td> <td>75</td> </tr>

</table>

</body>

</html>

​

  • <th> tag is used to add row/column header.
  • row/column headers are center - aligned and in bold font,which distinguish them from other cells.

7 of 12

Contd..

<!DCOCTYPE html>

<html>

<head>

<title> HTML Table Tag Example</title

</head>

<body>

<table border="1">

<tr> <td> &nbsp; </td><th>OS</th> <th>OOPS</th> </tr>

<tr> <th>sujay</th> <td>82</td> <td>80</td> </tr>

<tr> <th>Tulasi</th><td>80</td> <td>75</td> </tr>

</table>

</body>

</html>

<th> tag is also used to add a row header

8 of 12

<caption> tag

<!DCOCTYPE html>

<html>

<head>

<title> HTML Table Tag Example</title

</head>

<body>

<table border="1">

<caption> Marks </caption>

<tr> <th>Name</th><th>OS</th> <th>OOPS</th> </tr>

<tr> <th>sujay</th> <td>82</td> <td>80</td> </tr>

<tr> <th>Tulasi</th><td>80</td> <td>75</td> </tr>

</table>

</body>

</html>

​

  • To add a caption to the table, the <caption> tag is used.
  • The <caption> tag must appear only once and must appear immediately after the <table> tag and before the first <tr> tag.
  • It defaultly aligned with center & top of the table itself.
  • Attribute “align” is used with <caption> tag.

9 of 12

Rowspan and colspan

<!DOCTYPE html>

<html>

<head>

<title> HTML Table Tag Example</title

</head>

<body>

<table border="1">

<caption> Marks </caption>

<tr>

<th rowspan=2>Name</th>

<th colspan=2>Marks</th>

</tr>

<tr>

<th>OS</th> <th>OOPS</th> </tr>

<tr> <th>sujay</th> <td>82</td> <td>80</td> </tr>

<tr> <th>Tulasi</th><td>80</td> <td>75</td> </tr>

</table>

</body>

</html>

​

  • <rowspan> indicates the no.of. rows a cell spans.
  • <colspan> indicates the no.of. columns a cell spans

10 of 12

Cellspacing and cellpadding

<!DOCTYPE html>

<html>

<head>

<title> HTML Table Tag Example</title

</head>

<body>

<table border cellspacing="6" cellpadding="3" width=300>

<caption> Marks </caption>

<tr>

<th rowspan=2>Name</th>

<th colspan=2>Marks</th>

</tr>

<tr>

<th>OS</th> <th>OOPS</th> </tr>

<tr> <th>sujay</th> <td>82</td> <td>80</td> </tr>

<tr> <th>Tulasi</th><td>80</td> <td>75</td> </tr>

</table>

</body>

</html>

These attributes are used to adjust white spaces in your table.

“cellspacing”space between adjacent cells.

“Cellpadding”space between the cell border and its content.

cellspacing

cellpadding

11 of 12

Attributes in <table> tag

12 of 12

Attributes in tr tag