Read Lesson 10 – Creating HTML Tables Use and Code

Check Lesson 10 – Creating HTML Tables from Learn HTML section on e akhabaar

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 : 

tags. It will appear on the top of the table. Following example will help you to learn more about it:







Table caption example





Tags Description

Create Table

Create table rows

Create table data cells
border To put border around table

Example is explained below:







Create first table









 





 



Cell 1 Cell 2





The result will be displayed as:

Create first table

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 

tag. Let’s see with following example how to do this:-







Create  table heading







 

 



 

 

 



Name Age
Robert 32





The result will be displayed as:

Create table heading

  • 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:







Cellspacing & cellpadding example







 

 



 

 



Name Age
Robert 32





The result will be displayed as:

  • Row/Column Merger:

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







Row & column merger







 

 

 

 



 

 



 

 

 



 

 

 

S.no. Description Price
1 Sofa 25000

 
2 Bed 15000

 
Total 40000

The result will be displayed as:

Row cell merger

S.no. Description Price
1 Sofa 25000
2 Bed 15000
Total 40000
  • 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: 







Background color example





















S.no. Description Price
1 Sofa 25000
2 Bed 15000
Total 40000





The result will be displayed as:

Setting background color

S.no. Description Price
1 Sofa 25000
2 Bed 15000
Total 40000
  • 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:







Height & width example













Name Age
Robert 32
Johnson 29





The result will be displayed as:

Height width example

  • Writing Table Caption:

You can write table caption using html 

..










This is table caption
Name Age
Robert 32
Johnson 29





The result will be displayed as:

Table caption example

This is table caption
Name Age
Robert 32
Johnson 29
  • 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:







Table caption example

















Name Age


     



         



         



         



     

Robert



32
Johnson 29





The result will be displayed as:

Nested Table

Name Age

Robert

32
Johnson 29

Chapter Summery:

  • Use html
     tag to create tables in html.
  • Use html
  •  tag to create table rows.
  • Use html
  • tag to add table data.
  • Use html ‘border’ attribute to add table border.
  • Use html
  • 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

    .

    To right align your table use html element

    .

    • 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:

     

    • 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:







    Height & width example













    Name Age
    Robert 32
    Johnson 29





    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.

    Post your comments about Lesson 10 – Creating HTML Tables below.