Creation Of Table With Both Rowspan And Colspan Using HTML Code

 Creation Of Table With Both Rowspan And Colspan Using HTML Code

NOTE: Rowspan means row margin or row count where we only used to count the no. of rows and Colspan means column margin or column count where we only used to count the no. of columns.

NOTE: Here I have shown the differences by using 0 pixel cellspacing and 20 pixels cellspacing.

HTML CODE BY USING 0 PIXEL CELLSPACING:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Table</title>

</head>

<body>

<table border="15px" cellpadding="20px" cellspacing="0px">

<tr>

<th bgcolor="yellow" colspan="2">RAM</th>

<th bgcolor="violet"></th>

<th bgcolor="orange" rowspan="1">MONITOR</th>

</tr>

<tr>

<th bgcolor="green" colspan="3">CPU</th>

<th bgcolor="pink" rowspan="1">LAPTOP</th>

</tr>

<tr>

<th bgcolor="grey" rowspan="2">UPS</th>

<th bgcolor="red" rowspan="2" colspan="2">ROM</th>

<th bgcolor="blue" rowspan="1">SWITCH</th>

</tr>

<tr>

<th bgcolor="yellow" rowspan="1">ROUTER</th>

</tr>

</body>

</html>

OUTPUT BY USING 0 PIXEL CELLSPACING:

HTML CODE BY USING 20 PIXELS CELLSPACING:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Table</title>

</head>

<body>

<table border="15px" cellpadding="20px" cellspacing="20px">

<tr>

<th bgcolor="yellow" colspan="2">RAM</th>

<th bgcolor="violet"></th>

<th bgcolor="orange" rowspan="1">MONITOR</th>

</tr>

<tr>

<th bgcolor="green" colspan="3">CPU</th>

<th bgcolor="pink" rowspan="1">LAPTOP</th>

</tr>

<tr>

<th bgcolor="grey" rowspan="2">UPS</th>

<th bgcolor="red" rowspan="2" colspan="2">ROM</th>

<th bgcolor="blue" rowspan="1">SWITCH</th>

</tr>

<tr>

<th bgcolor="yellow" rowspan="1">ROUTER</th>

</tr>

</body>

</html>

OUTPUT BY USING 20 PIXELS CELLSPACING: