Splitting Or Merging Cells In An HTML Table Using An HTML Code

-

Video Tutoral at https://youtu.be/bo4HN8R_lPY

1. Code Before Using rowspan & colspan:
<title>HTML Table</title> <style> table, th, td { border: 1px solid blue; border-collapse: collapse; } th, td { padding: 5px; } </style> <table align="center" width="80%"> <tr> <td colspan="7" style="text-align: center; font-size: 25px; background: green; color: yellow;"><b>Position Holders For the Academic Year 2019</b></td> </tr> <tr> <th>SL No</th> <th>Name</th> <th>Class</th> <th>Percentage</th> <th>1st Position</th> <th>2nd Position</th> <th>3rd Position</th> </tr> <tr> <td>1.</td> <td>Jack</td> <td>12 Commerce 'A'</td> <td>98%</td> <td>97%</td> <td>95%</td> <td>93.8%</td> </tr> <tr> <td>2.</td> <td>Dorji</td> <td>12 Commerce 'B'</td> <td>97.8%</td> <td>97.6%</td> <td>85%</td> <td>85.01%</td> </tr> <tr> <td>3.</td> <td>Oma Ghalley</td> <td>12 Science 'A'</td> <td>100%</td> <td>99.01%</td> <td>96.8%</td> <td>96%</td> </tr> <tr> <td>4.</td> <td>Rose Marry</td> <td>12 Science 'B'</td> <td>100%</td> <td>98%</td> <td>96</td> <td>85%</td> </tr> <tr> <td>5.</td> <td>Changying</td> <td>12 Arts 'A'</td> <td>100%</td> <td>97%</td> <td>96.8</td> <td>96%</td> </tr> <tr> <td>6.</td> <td>D.k Pradhan</td> <td>12 Arts 'B'</td> <td>98%</td> <td>97%</td> <td>95.8</td> <td>94.01%</td> </tr> </table>

2. Code after using rowspan & colspan: <title>HTML Table</title> <style> table, th, td { border: 1px solid blue; border-collapse: collapse; } th, td { padding: 5px; } </style> <table align="center" width="80%"> <tr> <td colspan="10" style="text-align: center; font-size: 25px; background: green; color: yellow;"><b>Position Holders For the Academic Year 2019</b></td> </tr> <tr> <th rowspan="2"></th> <th>Name</th> <th colspan="4">Class</th> <th>Percentage</th> <th>1st Position</th> <th>2nd Position</th> <th>3rd Position</th> </tr> <tr> <td>Jack</td> <td colspan="2">12 Commerce 'A'</td> <td>Accountancy</td> <td>Commerce</td> <td>98%</td> <td>97%</td> <td>95%</td> <td>93.8%</td> </tr> <tr> <td>Lopon</td> <td>Dorji</td> <td colspan="4">12 Commerce 'B'</td> <td>97.8%</td> <td>97.6%</td> <td>85%</td> <td>85.01%</td> </tr> <tr> <th rowspan="4">Sl No</th> <td>Oma Ghalley</td> <td>12 Science 'A'</td> <td>Biology</td> <td>Physics</td> <td>Chemistry</td> <td>100%</td> <td>99.01%</td> <td>96.8%</td> <td>96%</td> </tr> <tr> <td>Rose Marry</td> <td colspan="4">12 Science 'B'</td> <td>100%</td> <td>98%</td> <td>96</td> <td>85%</td> </tr> <tr> <td>Changying</td> <td colspan="3">12 Arts 'A'</td> <td>Arts with Maths</td> <td>100%</td> <td>97%</td> <td rowspan="2">96.8</td> <td>96%</td> </tr> <tr> <td>D.k Pradhan</td> <td colspan="4">12 Arts 'B'</td> <td>98%</td> <td>97%</td> <td>94.01%</td> </tr> </table>

3. Behind rowspan & colspan, Hiding Border Lines In An HTML Table By Using Background Color: 
Full code:↓ <title>HTML Table</title> <style> table, th, td { border: 1px solid blue; border-collapse: collapse; } th, td { padding: 5px; } </style> <table align="center" width="80%"> <tr> <td colspan="7" style="text-align: center; font-size: 25px; background: green; color: yellow;"><b>Position Holders For the Academic Year 2019</b></td> </tr> <tr> <th>SL No</th> <th>Name</th> <th>Class</th> <th>Percentage</th> <th>1st Position</th> <th>2nd Position</th> <th>3rd Position</th> </tr> <tr> <td>1.</td> <td>Jack</td> <td>12 Commerce 'A'</td> <td>98%</td> <td>97%</td> <td>95%</td> <td>93.8%</td> </tr> <tr> <td>2.</td> <td>Dorji</td> <td>12 Commerce 'B'</td> <td>97.8%</td> <td>97.6%</td> <td>85%</td> <td>85.01%</td> </tr> <tr> <td>3.</td> <td>Oma Ghalley</td> <td>12 Science 'A'</td> <td>100%</td> <td>99.01%</td> <td>96.8%</td> <td>96%</td> </tr> <tr> <td>4.</td> <td>Rose Marry</td> <td>12 Science 'B'</td> <td>100%</td> <td>98%</td> <td>96</td> <td>85%</td> </tr> <tr> <td>5.</td> <td>Changying</td> <td>12 Arts 'A'</td> <td>100%</td> <td>97%</td> <td>96.8</td> <td>96%</td> </tr> <tr> <td style=" border-left:1px solid white; border-bottom:1px solid white; border-right:1px solid white;"></td> <td style=" border-left:1px solid white; border-bottom:1px solid white;"></td> <td>12 Arts 'B'</td> <td>98%</td> <td>97%</td> <td style="border-bottom:1px solid white; border-right:1px solid white;"></td> <td style=" border-bottom:1px solid white; border-right:1px solid white;"></td> </tr> </table>

You Might Also Like

HTML CODING

« PREV

NEXT »