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.

 

Table Creation: An HTML table is defined with the <table> tag. Each table row is defined with the <tr> tag. A table header is defined with the <th> tag. By default, table headings are bold and centered. A table data/cell is defined with the <td> tag is regular and left aligned by default. A more complex HTML table may also include <caption>, <col>, <colgroup>, <thead>, <tfoot>, and <tbody> elements.

 

Table related tags and attributes:

TagsAttributeValueUses
 <table>border2,3,4….Specifies whether or not the table is being used for layout purposes
bgcolorrgb(x,x,x)
#xxxxxx
Specifies the background color for a table
cellspacing2,3,4….Specifies the space between cells
cellpadding2,3,4….Specifies the space between the cell wall and the cell content
alignleft,right,centerSpecifies the alignment of a table according to surrounding text
width50%,70%,…Specifies the width of a table
<tr>alignleft,right,centerAligns the content in a cell (By default left)
<th>rowspan2,3,4….Sets the number of rows a cell should span
colspan2,3,4….Specifies the number of columns a cell should span
<td>alignleft,right,centerAligns the content in a cell(By default left)
rowspan2,3,4….Sets the number of rows a cell should span
colspan2,3,4….Specifies the number of columns a cell should span

 

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.

Two rows are marged in the above table. That’s why “rowspan” attribute has been used.

 

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

Two rows are marged in the above table. That’s why “rowspan” attribute has been used.

 

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

 

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

 

 

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.

 

Multiple Choice Questions:

 


Written by,

Leave a Reply

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