Header Ads Widget

How to create simple HTML table with rowspan & colspan attribute & some css effects.

My codding spot May 14, 2021

In this post, you will learn table creation in HTML. 

Precap:- 

  • What is the “<table>”  Tag in HTML?
  • rowspan and colspan
  • cellspacing and cellpadding

What is <table> tag in HTML?

The <table> tag in HTML is used to display data in tabular format. HTML table display data in row and column structure.
The  <th> tag display heading. <caption> tag display table heading.
The <tr> tag display rows in a table an d the <td> tag represents data.
All the tags must have to close with </>.

HTML table <tr>, <th> and <td> elements 

<tr> 

<tr> tag is used to create rows in a table. Rows are arranged horizontally. The <th> and <td> tags are defined under<tr>.

<td>

<td> tag specifies table cell. All table content is written between <td> and </td>.

<th>

<th> tag specifies the heading of the table cell. If you want to specify the heading in a table then use <th> tag instead of <td>.

<table border="2px">
<tr>
<th> Fruit </th>
<th> Colour </th>
</tr>
<tr>
<td>Apple</td>
<td>Red</td>
</tr>
<tr>
<td>Banana</td>
<td>Yellow</td>
</tr>
</table>

Output
HTML table cell, table row, table header
HTML table cell, table row, the table header 

For example, the border is specified by the border attribute.

What is rowspan and colspan attribute in HTML?

When content is too long and creates an issue in the display then spanning/merging of row and column is required.

To join two or more rows rowspan attribute is added to the tag that requires spanning/joining rows.

Similarly to merge columns colspan attribute is added tag that requires merging/joining.

Example
......
<td rowspan="2">Two rows are merged.</td>
<th colspan="3">Join three columns.</th>
......

What is the difference between cellspacing and cellpadding?

cellpadding attribute add padding between table cell data and the cell border. 
cellpadding also changes the original size of a table cell.

cellspacing attribute adds spacing between two cells in a table. 
cellspacing attribute does not affect the size of a table cell.


Here is an illustration of the table and how it looks in the output. 

Marksheet Table figure
Marksheet table illustration

Example of student marksheet using HTML table 

Steps required for creating student marksheet

1. write a table tag in your HTML body element. After that put “<caption></caption>”  within the “<table></table>” element. Give a caption to the marksheet. 
2.  Add three pairs of “<tr></tr>” elements. In the first pair add the “<th></th>” element and write in between ‘Student name'. Beside it write “ <td></td>” and write the name of a student. 
3.  In the next row similarly add ‘Roll no' and ‘Seat no'. In the last row add the Institute name. 
4.  Now, our next step is to add student marks for all subjects and Total and Grade. 
5.  Important step is to create header rows. Look at the figure above ‘Result' heading is splitting into three columns:-  “1st Internal”, “2nd Internal” and “External”. “Subjects” and “Total”  are merged in two rows. 
6.  For splitting and joining/merging colspan and rowspan attribute is used. For joining two rows rowspan attribute is added to the “<th>” or “<td>” element. 
7.  In our program, the rowspan attribute is added to “<th>” elements of ‘Subjects' and ‘Total’ cells. Similarly, the colspan attribute is added to the “<td>” element of the ‘Student name' cell and “<th>” element of the ‘Result’ cell. 
So, here ‘Result’ row is divided into three columns. Similarly ‘Subjects’ and ‘Total' columns are merged into two rows. 'Grand total' is also merged into two columns. 
Now add the value in each cell. 
8.  You can also set the padding and spacing in a table. For that “cellpadding “ and “cellspacing “ attributes are used. 

Html code:-






 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!Doctype html>
<html lang="en">
<head>
<title>HTML Table</title>
<meta charset="utf-8">
<link rel="stylesheet" href="table.css">
</head>
<body>
<table cellpadding="15" cellspacing="17">
<caption>Marksheet</caption>
<tr><th>Student name:</th><td colspan="2">XYZ</td></tr>
<tr><th>Roll no:</th><td>12345</td><th>Seat no:</th><td>M22345</td></tr>
<tr><th>Institute:</th><td>abc institute</td></tr>
<tr><th rowspan="2" style="background:#ecc">Subjects</th><th colspan="3"  style="background:#ecc">Result</th><th rowspan="2" style="background:#ecc">Total</th></tr>
<tr style="background:#efc"><th>1st Internal</th><th>2nd Internal</th><th>External</th></tr>
<tr><th align="left">Gujarati</th><td>30/50</td><td>39/50</td><td>70/100</td><td>139/200</td></tr>
<tr><th align="left">Hindi</th><td>40/50</td><td>43/50</td><td>65/100</td><td>148/200</td></tr>
<tr><th align="left">English</th><td>44/50</td><td>42/50</td><td>83/100</td><td>169/200</td></tr>
<tr><th align="left">Social science</th><td>45/50</td><td>45/50</td><td>70/100</td><td>169/200</td></tr>
<tr><th align="left">Mathematics</th><td>48/50</td><td>50/50</td><td>85/100</td><td>183/200</td></tr>
<tr><th align="left">Science</th><td>46/50</td><td>49/50</td><td>90/100</td><td>185/200</td></tr>
<tr><th colspan="2">Grand Total</th><td>993/1200</td><th>Grade</th><td>A</td></tr>
</table>
</body>
</html>

Output:-
Student marksheet using HTML table
Student Marksheet using HTML table element 

You can apply styles/formatting in two ways.

(1) Add the style attribute to your html element. 
    Add a style attribute with an equal sign in a tag by giving some space. After that add css property, colon(:), and its value. For example, <tr style=” background:#efc”>
(2) Add style using CSS. 
In the CSS file, html tag becomes a selector. You have to write the tag name without “<>” bracket. Add property and its value in the curly “{}” bracket. 
Note: Link this CSS file to your HTML file. 
I have used both. 
The width property is used for setting width of the table.
In my table, I have set a 50 percent width. Set font as  “Arial”. Give a 2-pixel grey border to the table and table cells. 
Look at the following code:

CSS code:-


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

table{
background:#ec8;
margin:50px;
font-family:arial;
width:50%;
border:2px solid grey;}
caption{
font-size:24pt;
font-weight:bold;
color:#f88;}
th{
font-size:18pt;
color:#AF487E;
}
td{
font-size:16pt;
border:2px solid grey;
}


Table Tag summary


Tag name                                 Description
<table>                                     Generate table in HTML. 
<caption>                                Give heading to a table. 
<th>                                           Give a heading in the table. 
<tr>                                            Table row. A horizontal line in a table. 
<td>                                           Table data stored in a table cell. 

Note that:-

“rowspan=’no.of rows' and colspan=’no of columns'”
“cellpadding=’n' and cellspacing=’n'
Where n=number you want to padding and spacing. 

Tags:
My codding spot

Posted by: My codding spot

Post a Comment

0 Comments