How To Create Table In HTML

1. What is Table In HTML?

Table is a collection of rows and columns. It is very easy to create table in HTML. To create table <table> tag is used. If we consider student table then some fields/columns of student table are Roll No, Name, Contact No, City, etc. Table is used to display records of students, employee, products, etc in tabular format. Following image contains example of student table:

Create HTML Table

2. Introduction of <table>, <caption>, <tr>, <td> and <th> tags

<table> tag is the main tag to start table. <table> tag contains many useful attributes, some of them listed below:

• align=" left | center | right "
• background="image-path"
• bgcolor=" color-code / color-name "
• border=" pixel value "
• bordercolor=" color-code / color-name "
• cellpadding=" pixel value "
• cellspacing=" pixel value "
• height=" pixel value / percent value "
• width=" pixel value / percent value "

<caption> tag is used for table caption. <caption> tag is written immediately after <table> tag. <caption> tag contains one useful attribute that is align.

<tr> stands for table row. <tr> tag placed inside <table> tag. <tr> tag is used to create rows in the table. <tr> tag also have attributes, some of useful attributes listed below:

• align=" left | center | right "
• valign=" baseline | bottom | middle | top "
• nowrap=" nowrap "
• height=" pixel value "

<td> and <th> are similar tags except <th> tag used for table heading and <td> tag used for table data. Let's see some useful attributes of these tags:

• align=" left | center | right "
• background=" image-path "
• bgcolor=" color-code / color-name "
• bordercolor=" color-code / color-name "
• colspan=" number "
• height=" pixel value / percent value "
• nowrap=" nowrap "
• rowspan=" number "
• valign=" baseline | bottom | middle | top "
• width=" pixel value / percent value " 

  3. HTML table tag examples

Table tag attributes:

<table border="1px" align="center" bgcolor="#00CCFF"
 cellspacing="0px" cellpadding="10px" >
 <caption>Student Details</caption>
 <tr>
  <th>Roll No</th>
  <th>Name</th>
  <th>Contact No</th>
  <th>City</th>
 </tr>
 <tr>
  <td>1</td>
  <td>Jignesh Siddhapura</td>
  <td>9999999999</td>
  <td>India</td>
 </tr>
 <tr>
  <td>2</td>
  <td>John Smith</td>
  <td>8888888888</td>
  <td>New York</td>
 </tr>
 <tr>
  <td>3</td>
  <td>Mark Zuckerberg</td>
  <td>7777777777</td>
  <td>California</td>
 </tr>
</table>

OUTPUT:

Student Details

Roll No	Name	Contact No	City
1	Jignesh Siddhapura	9999999999	India
2	John Smith	8888888888	New York
3	Mark Zuckerberg	7777777777	California

Difference between cellspacing and cellpadding attribute of table tag

cellspacing=20px

cellpadding=20px

Tr tag attributes
With tr tag attribute, you can apply style to whole row not particular cell.

<table border="1px" bgcolor="#00CCFF" cellspacing="0px" 
cellpadding="5px" height="250px" width="500px">
 <caption>Student Details</caption>
 <tr bgcolor="#33CC00">         
  <th>Roll No</th>
  <th>Name</th>
  <th>Contact No</th>
  <th>City</th>
 </tr>
 <tr bgcolor="#CCCCCC" align="right" valign="top">
  <td>1</td>
  <td>Jignesh Siddhapura</td>
  <td>9999999999</td>
  <td>India</td>
 </tr>
 <tr bgcolor="#FF66CC" align="left" valign="middle">
  <td>2</td>
  <td>John Smith</td>
  <td>8888888888</td>
  <td>New York</td>
 </tr>
 <tr bgcolor="#FFCC66" align="center" valign="bottom">
  <td>3</td>
  <td>Mark Zuckerberg</td>
  <td>7777777777</td>
  <td>California</td>
 </tr>
</table>

OUTPUT:

Student Details

Roll No	Name	Contact No	City
1	Jignesh Siddhapura	9999999999	India
2	John Smith	8888888888	New York
3	Mark Zuckerberg	7777777777	California

Td or th tag examples
With td or th tag attribute, you can change particular cell's style.

<table border="1px" bgcolor="#00CCFF" cellspacing="0px" 
    cellpadding="2px" height="250px" width="500px">
 <caption>Student Details</caption>
 <tr>         
  <th rowspan="2">Roll No</th>
  <th rowspan="2">Name</th>
  <th rowspan="2">Contact No</th>
  <th colspan="2">Location</th>
 </tr>
 <tr>
  <th>Region</th>
  <th>City</th>
 </tr>
 <tr>
  <td align="center">1</td>
  <td>Jignesh Siddhapura</td>
  <td bgcolor="#CCCCCC">9999999999</td>
  <td>India</td>
  <td valign="bottom">Rajkot</td>
 </tr>
 <tr>
  <td bgcolor="#9933CC">2</td>
  <td>John Smith</td>
  <td >8888888888</td>
  <td bgcolor="#CCCC66">US</td>
  <td>New York</td>
 </tr>
 <tr>
  <td>3</td>
  <td bgcolor="#FF9900" height="20px">Mark Zuckerberg</td>
  <td>7777777777</td>
  <td>US</td>
  <td align="right">California</td>
 </tr>
</table>

OUTPUT:

Student Details

Roll No	Name	Contact No	Location
			Region	City
1	Jignesh Siddhapura	9999999999	India	Rajkot
2	John Smith	8888888888	US	New York
3	Mark Zuckerberg	7777777777	US	California

Video Tutorial of HTML Table Tag



If you have any questions, then freely comment below.