Creating complex table structure without using css
Question
I am trying to make this table in HTML without using CSS, but I am not getting the desired output. I have tried a bunch of other combinations for the row with 6:2:3 rowspan.
This is the desired output
This is the code I am using.
<!doctype html> <html> <head> <title>Table</title> </head> <body> <table border="1"> <tr> <th rowspan="3"> </th> <th colspan="3"> </th> </tr> <tr> <th colspan="2"> </th> <th rowspan="2"> </th> </tr> <tr> <th> </th> <th> </th> </tr> <tr> <td rowspan="2"> </td> <td rowspan="2"> </td> <td rowspan="2"> </td> <td > </td> </tr> <tr> <td > </td> </tr> <tr> <td rowspan="6"> </td> <td rowspan="2"> </td> <td rowspan="2"> </td> <td rowspan="3"> </td> </tr> <tr> <td rowspan="2"> </td> <td rowspan="2"> </td> </tr> <tr> <td rowspan="2"> </td> <td rowspan="2"> </td> <td rowspan="3"> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> </body> </html>
1 answers
solution1
1 2019-09-14 19:36:10
Done Heights may not be set but it works properly
table, td { border: 1px solid black; } td { height: 50px; }
<table style="width:100%"> <tr> <td>5</td> <td colspan="3"> <table style="width:100%"> <tr> <td> <table style="width:100%;margin-top:50px;"> <tr> <td>6</td> </tr> </table> </td> <td>7</td> </tr> </table> </td> </tr> <tr> <td>8</td> <td>9</td> <td>10</td> <td> <table style="width:100%"> <tr> <td>11</td> </tr> </table> <table style="width:100%"> <tr> <td>12</td> </tr> </table> </td> </tr> <tr> <td></td> <td class="not"> <table style="width:100%"> <tr> <td>13</td> </tr> <tr> <td>14</td> </tr> <tr> <td>15</td> </tr> </table> </td> <td colspan="2"> <table style="width:100%"> <tr> <td>16</td> </tr> <tr> <td>17</td> </tr> </table> </td> </tr> <tr> <td>18</td> <td>16</td> <td>20</td> <td>21</td> </tr> </table>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Creating complex div structure using CSS
Creating web page using table structure and CSS
CSS/HTML: How to achieve a structure like table without using table?
Creating table like structure with spanned rows using css
Creating a complex excel like grid structure with HTML and CSS
Create complex table body structure using Javascript
Creating table using div structure
Create complex table structure
HTML Table with complex structure
Creating organizational chart structure using CSS and JQuery
Related Tags