HTML Page Structure

HTML Elements
HTML Attributes


HTML Table Tag

HTML Table Tag is used for arranging the data in the form of rows and columns on the web page. It is a very useful feature. One another purpose of using a table is to create a page layout with the use of hidden tables.

Table can be created using <table> element in HTML. Alongwith table element, other elements used are <tr> which refers to a table row, <th> which refers to a table header and <td> which refers to a table cell/column.

Syntax

<table>
  <tr>
    <th>Heading1</th>
    <th>Heading2</th>
	<th>Heading3</th>
  </tr>
  <tr>
    <td>Content1</td>
    <td>Content2</td>
	<td>Content3</td>
  </tr>
</table>

Example

<!DOCTYPE html>
<html>
<head>
<title>Table Example</title>
</head>
<body>
<table border="1">
  <tr>
    <th>Name</th>
    <th>Subject</th>
	<th>Marks</th>
  </tr>
  <tr>
    <td>John</td>
    <td>History</td>
	<td>79</td>
  </tr>
</table>
</body>
</html>

This will produce following result

Name Subject Marks
John History 79

Table Attributes List

The below table contains Table Attributes and their description which is supported by HTML version.

Attribute NameAttribute ValueAttribute Description
border0 or 1refers to whether the table cells have border or not
bgcolorcolor-namerefers to background color of the table
cellpaddingpixelsrefers to spacing between cell's wall & content
cellspacingpixelsrefers to spacing between cells
widthpixels or %refers to width of a table
alignleft, center or rightrefers to alignment of the table
valigntop, middle,bottomrefers to vertical alignment of the table
Above attributes can be better understood by following examples:

border Example

<!DOCTYPE html>
<html>
<head>
<title>border Example</title>
</head>
<body>
<table border="1">
  <tr>
    <th>Name</th>
    <th>Subject</th>
	<th>Marks</th>
  </tr>
  <tr>
    <td>John</td>
    <td>History</td>
	<td>79</td>
  </tr>
</table>
</body>
</html>

This will produce following result

Name Subject Marks
John History 79

bgcolor Example

<!DOCTYPE html>
<html>
<head>
<title>bgcolor Example</title>
</head>
<body>
<table border="1" bgcolor="FF00FF">
  <tr>
    <th>Name</th>
    <th>Subject</th>
	<th>Marks</th>
  </tr>
  <tr>
    <td>John</td>
    <td>History</td>
	<td>79</td>
  </tr>
</table>
</body>
</html>

This will produce following result

Name Subject Marks
John History 79

cellpadding Example

<!DOCTYPE html>
<html>
<head>
<title>cellpadding Example</title>
</head>
<body>
<table border="1" cellpadding="6">
  <tr>
    <th>Name</th>
    <th>Subject</th>
	<th>Marks</th>
  </tr>
  <tr>
    <td>John</td>
    <td>History</td>
	<td>79</td>
  </tr>
</table>
</body>
</html>

This will produce following result

Name Subject Marks
John History 79

cellspacing Example

<!DOCTYPE html>
<html>
<head>
<title>cellspacing Example</title>
</head>
<body>
<table border="1" cellspacing="8">
  <tr>
    <th>Name</th>
    <th>Subject</th>
	<th>Marks</th>
  </tr>
  <tr>
    <td>John</td>
    <td>History</td>
	<td>79</td>
  </tr>
</table>
</body>
</html>

This will produce following result

Name Subject Marks
John History 79

width Example

<!DOCTYPE html>
<html>
<head>
<title>width Example</title>
</head>
<body>
<table border="1" width="500">
  <tr>
    <th>Name</th>
    <th>Subject</th>
	<th>Marks</th>
  </tr>
  <tr>
    <td>John</td>
    <td>History</td>
	<td>79</td>
  </tr>
</table>
</body>
</html>

This will produce following result

Name Subject Marks
John History 79

align Example

<!DOCTYPE html>
<html>
<head>
<title>align Example</title>
</head>
<body>
<table border="1" align="center">
  <tr>
    <th>Name</th>
    <th>Subject</th>
	<th>Marks</th>
  </tr>
  <tr>
    <td>John</td>
    <td>History</td>
	<td>79</td>
  </tr>
</table>
</body>
</html>

This will produce following result

Name Subject Marks
John History 79

valign Example

<!DOCTYPE html>
<html>
<head>
<title>valign Example</title>
</head>
<body>
<table border="1" valign="bottom">
  <tr>
    <th>Name</th>
    <th>Subject</th>
	<th>Marks</th>
  </tr>
  <tr style="height:100px">
    <td valign="top">John</td>
    <td valign="middle">History</td>
	<td valign="bottom">79</td>
  </tr>
</table>
</body>
</html>

This will produce following result

Name Subject Marks
John History 79