HTML Table Tag

In HTML, table is used for arranging the data in the form of rows and columns on the webpage. 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

See Also

HTML Form Tags
HTML Page Formating Tags
HTML Other Tags


 
 
SHARE THIS IF YOU LIKE!
submit to reddit

SUBSCRIBE FOR LATEST UPDATES
HAVE WE CONNECTED ON FACEBOOK?
TOP TUTORIALSTOP CODE EXAMPLESTOP LIVE DEMOLINKSSTAY CONNECTED
HTML Tutorial
HTML5 Tutorial
Bootstrap3 Tutorial
Javascript Tutorial
TypeScript Tutorial
AngularJS Tutorial
CSharp Tutorial
PHP Tutorial
Developer Tools
Javascript
AngularJS
Google MAP API V3
ASP.NET
Javascript
AngularJS
Google MAP API V3
Contact Us
Advertise with Us
Privacy Policy
Disclaimer
Stay connected. We actually like you. If you want to get up to the minute updates, then connect with us on your fav below.
 
Twitter   Linkedin   Facebook   Google+    RSS   Pinterest
 
Protected by Copyscape Original Content Checker
 
 
Copyright ©2017 www.techstrikers.com Unauthorized reproduction/replication of any part of this site is prohibited.