Fourth Chapter Lesson-9: HTML code for creating table.

At the end of this lesson-

  • 1. You will be able to create table on the web page. 
  • 2. You will be able to marge the rows of the table.
  • 3. You will be able to marge the columns of the table.

 

Go for Bangla Version

Table Creation in HTML:

The purpose of creating a web page or website is to present any information globally. It is often necessary to present data and information in tabuler form. Lets see the table elements-


 

  • The <table> </table> tag defines an HTML table. An HTML table consists of the <table> element and one or more <tr>, <th>, and <td> elements. All the elements related to table are written in Table tag.
  • A table may have a caption as a title or explanation for the table and it shows up at the top of the table. <caption> </caption> tag is used to give a caption for a table.
  • Each table row is defined with the <tr> </tr> tag. In the above table there are three rows and each row has three cells. That means, row consists of some cells.
  • There are two types of cells in a table. Header cells contains header information and Data cells contains data.
  • A table header or Header cell is defined with the <th> </th> tag and A table data or Data cell is defined with the <td> </td> tag. Both <th> </th> and <td> </td> tags are written in <tr></tr> tag.
  • By default, table headings are bold and centered. On the other hand, table data is regular and left aligned by default.

 

Attributes of <table> Tag and Uses :

Attributes of <tr> Tag and Uses :

Attributes of <td> and <th> Tags and Uses :

valign” Attribute of <td>, <th>, <tr> Tags and Uses :

The  valign attribute is used to specify the vertical alignment of content in a cell.

Syntax:

<tag_name valign = “top | middle | bottom | baseline”>

Attribute Value:

  • top: It sets the content to top-align.
  • middle: It sets the content to middle-align.
  • bottom: It sets the content to bottom-align.
  • baseline: It sets the content to baseline. The baseline is the line where most of the characters sit.

 

Example-1: Write HTML code for creating the following table on the web page.

 

Example-2: Write HTML code for creating the following table on the web page.

 

Example-3: Write HTML code for creating the following table on the web page.

In the above table, the cell having contact info made span two rows. That’s why rowspan attribute should be used. In this case it would be rowspan =”2″. Because It made span two rows. That means, value will be how many rows will be spanned. 

 

Example-4: Write HTML code for creating the following table on the web page.

In the above table, the cell having contact info made span two columns. That’s why colspan attribute should be used. In this case it would be colspan=”2″. Because It made span two columns. That means, value will be how many columns will be spanned. 

 

Example-5: Write HTML code for creating the following table on the web page.

In a table, By default space among the cells is 1px. If space among the cells is more than 1px, cellspacing attribute must be used. In the above table, the space among the cells is more than 1px. That’s why cellspacing attribute should be used.

 

Example-6: Write HTML code for creating the following table on the web page.

In the above table there is padding in the cells. That’s why cellpadding attribute should be used. cellpadding represents the distance between cell borders and the content within a cell.

 

Example-7: Write HTML code for creating the following table on the web page.

In Second row, content of first, second and third cells are top, middle and bottom aligned respectively.

In Third row, content of first, second and third cells are bottom, middle and top aligned respectively.

So “valign” attribute must be used.

 

Go for HTML Table related questions and answers

Lesson Evaluation-

Knowledge Based Questions:

Comprehension Based Questions:

Creative Questions:

Read the stem and answer the following questions:

c) Write HTML code for creating stimulas table on the web page.

Read the stem and answer the following questions:

c) What will be the output of the above HTML code?

Read the stem and answer the following questions:

c) Write HTML code for creating stimulas table on the web page.

Read the stem and answer the following questions:

c) Write HTML code for creating stimulas table on the web page.

Read the stem and answer the following questions:

c) Write HTML code for creating stimulas table on the web page.

Read the stem and answer the following questions:

c) Write HTML code for creating stimulas table on the web page.

 

Multiple Choice Questions:

1. Which tag is used for table header?

a) <tr>        b) <td>      c) <th>       d) <br>

2. Which attribute spans two or more rows?

a) rowspan      b) colspan        c) bgcolor        d) cellpadding

3. <table cellpadding= “5”> means distance of content and border of cell is-

a) 5 px      b) 5 meter      c) 5 cm       d) 5 inch

4.  Which one makes table without border?

a) border=“1”      b) border=“alt”        c) border=“0”      d) border=“null”

5. Tags used to create table are-

i. <tr>        ii. <th>       iii. <td>

Which one is correct?

a) i & ii      b) i & iii      c) ii & iii     d) i, ii & iii

6. Attributes of table tag are-

 i. border    ii. cellpadding         iii. align

Which one is correct?

a) i & ii      b) i & iii      c) ii & iii     d) i, ii & iii

7. Attributes of <td> tag are –

i.rowspan          ii. colspan           iii.align

Which one is correct?

a) i & ii      b) i & iii      c) ii & iii     d) i, ii & iii

 


Written by,

Leave a Reply

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