Lesson 10 – Creating HTML Tables

How to create tables in HTML?

HTML tables tags allows you to arrange information in a systematical manner, same like we do in MS Excel. In this chapter, we will learn how to create table, rows and columns using various HTML table tags.

Let’s create our first table using following html table tags : 

TagsDescription
<table>Create Table
<tr>Create table rows
<td>Create table data cells
borderTo put border around table

Example is explained below:

<!DOCTYPE html>
<html>
<head>
<title> Create first table</title>
</head>
<body>
<table border=”2″>
<tr>
 <td>Cell 1</td>
<td>Cell 2</td>
 </tr>
</table>
</body>
</html>

The result will be displayed as:

Create first table
Cell 1Cell 2

In above example, we have set table border value = 2, if you don’t want to give a border set border value = 0.

  • Creating Table Heading :

You can create a table heading using html <th> tag. Let’s see with following example how to do this:-

<!DOCTYPE html>
<html>
<head>
<title> Create  table heading</title>
</head>
<body>
<table border=”2″>
<tr> <th>Name</th> <th>Age</th></tr>
 <tr><td>Robert</td> <td>32</td> </tr>
</table>
</body>
</html>

The result will be displayed as:

Create table heading
NameAge
Robert32

 

  • Cellspacing and Cellpadding :

    In html, cellspacing attribute is used to set width of a cell and cellpadding attribute is used to set distance between cell borders & content.  Let’s learn more with below example:

<!DOCTYPE html>
<html>
<head>
<title> Cellspacing & cellpadding example</title>
</head>
<body>
<table border=”2″ cellspacing  = “3” cellpadding = “2”>
<tr> <th>Name</th> <th>Age</th></tr>
 <tr><td>Robert</td> <td>32</td></tr>
</table>
</body>
</html>

The result will be displayed as:

table-example

  • Row/Column Merger:

You can merge columns and rows in a table using html colspan and rowspan attributes. Example is explained below:

<!DOCTYPE html>
<html>
<head>
<title> Row & column merger</title>
</head>
<body>
<table border=”2″ >
<tr> <th>S.no.</th> <th>Description</th> <th>Price</th> <tr>
<tr><td>1</td> <td>Sofa</td> <td>25000<td> </tr>
<tr> <td>2</td> <td>Bed</td> <td>15000<td> </tr>
<tr> <td colspan = “2”> Total</td> <td>40000</td>  </tr></table></body></html>

The result will be displayed as:

Row cell merger
S.no.DescriptionPrice
1Sofa25000
2Bed15000
Total40000

 

  • Background Color:

You can change the background color of a table using  html bgcolor‘ attribute and border color using  html bordercolor‘ attribute. Example is shown below: 

<!DOCTYPE html>
<html>
<head>
<title> Background color example</title>
</head>
<body>
<table border=”2″ bordercolor = “red” bgcolor = “grey” >
<tr style=”color:blue;”>
<th>S.no.</th>
<th>Description</th>
<th>Price</th> </tr>
<tr> <td>1</td><td>Sofa</td><td>25000</td></tr>
<tr> <td>2</td> <td>Bed</td> <td>15000</td></tr>
<tr> <td colspan = “2”> Total</td> <td>40000</td> </tr>
</table>
</body>
</html>

The result will be displayed as:

Setting background color
S.no.DescriptionPrice
1Sofa25000
2Bed15000
Total40000

 

  • Height & Width:

You can set table height & width using html height & width attributes. Values can be defined either in % or in pixels. Example is shown below:

<!DOCTYPE html>
<html>
<head>
<title> Height & width example</title>
</head>
<body>
<table border=”1″ height= “180” width= “250”>
<tr> <th>Name</th> <th>Age</th> </tr>
<tr> <td>Robert</td> <td>32</td> </tr>
<tr> <td>Johnson</td> <td>29</td> </tr>
</table>
</body>
</html>

The result will be displayed as:

Height width example
NameAge
Robert32
Johnson29

 

  • Writing Table Caption:

You can write table caption using html <caption>..</caption> tags. It will appear on the top of the table. Following example will help you to learn more about it:

<!DOCTYPE html>
<html>
<head>
<title> Table caption example</title>
</head>
<body>
<table border=”2″>
<caption> This is table caption</caption>
<tr> <th>Name</th> <th>Age</th> </tr>
<tr> <td>Robert</td> <td>32</td> </tr>
<tr> <td>Johnson</td> <td>29</td> </tr>
</table>
</body>
</html>

The result will be displayed as:

Table caption example
This is table caption
NameAge
Robert32
Johnson29

 

  • HTML Nested Tables:

    In html, you can put one table inside another table using <td> element. Let’s learn more about nested tables in below example:

<!DOCTYPE html>
<html>
<head>
<title> Table caption example</title>
</head>
<body>
<table border=”2″>
<tr> <th>Name</th> <th>Age</th> </tr>
<tr>
<td>
     <table border = “3” bordercolor= “red”>
          <tr>
          <td> Robert</td>
          </tr>
     </table>
</td>
<td>32</td> </tr>
<tr> <td>Johnson</td> <td>29</td> </tr>
</table>
</body>
</html>

The result will be displayed as:

Nested Table
NameAge
Robert
32
Johnson29

Chapter Summery:

  • Use html <table> tag to create tables in html.
  • Use html <tr> tag to create table rows.
  • Use html <td> tag to add table data.
  • Use html ‘border’ attribute to add table border.
  • Use html <th> tag to add table heading.
  • Use html ‘Colspan’ & ‘Rowspan’ attributes to merge rows & columns.
  • Use html ‘bgcolor’  attribute to define table background color.
  • Use html ‘bordercolor’ attribute to define table border color.
  • Use html ‘Height’ & ‘Width’ attributes to define table height & width.
  • Use html <caption> tag to add table caption.

Interview Questions:

  • How would you set a table alignment to left or right?

To left align your table use html element <table align=”left”>.

To right align your table use html element <table align=”right”>.

  • How would you set a specific color to table border?

Table border color can be set using attribute ‘bordercolor’. Syntax for the same has been explained below:

 <table bordercolor=”red”>
  • How would you define a relationship between table border & attribute ?

Attributes are additional information about html elements. In this case, a default value of 1 pixel is added to a cell border if attribute is not used. However, if you would like to increase the border thickness, you have set attribute value to two or more. 

Practice Exercise:

<!DOCTYPE html>
<html>
<head>
<title> Height & width example</title>
</head>
<body>
<table border=”1″>
<tr> <th>Name</th> <th>Age</th> </tr>
<tr> <td>Robert</td> <td>32</td> </tr>
<tr> <td>Johnson</td> <td>29</td> </tr>
</table>
</body>
</html>

In above html code, 

  • Change the background color of text ‘Robert’ to yellow.
  • Left align the text “Jonhson”.
  • Make table height = 150 and width = 250.
  • Merge row one upto 3 cells.
Click here to practice above exercise in real time HTML code editor

Leave a Reply

Your email address will not be published. Required fields are marked *

+ 18 = 22