All geek questions in one place

How to create an HTML table with a complex layout?

How to create a table with HTML?

table layout drawing

I tried, but not sure how to do it right.

My code is:

<table border=1 cellpadding=0 cellspacing=0> <tr> <td>&nbsp;&nbsp;&nbsp;</td> <td>&nbsp;&nbsp;&nbsp;</td> <td colspan="2">&nbsp;&nbsp;&nbsp;</td> </tr> <tr> <td colspan=2>&nbsp;&nbsp;&nbsp;</td> <td>&nbsp;&nbsp;&nbsp;</td> <td>&nbsp;&nbsp;&nbsp;</td> </tr> </table>
+4
source share
2 answers

Use the rowspan and colspan attributes.

The table has 3 columns (cells) and 3 rows:

 <table> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td colspan="2" rowspan="2">&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <!-- <td> from prev <tr> here with colspan="2" and rowspan="2" --> <td>&nbsp;</td> </tr> </table>​

Make sure that each row ( <tr> ) always matches the number of cells / columns ( <td> ). <td> with colspan="2" counts as 2 .

  • So, the first <tr> has 3 cells (1 + 1 + 1).
  • The second also has 3 (2 + 1) ...
  • ... and the last has one <td> from the previous <tr> , which has colspan="2" and rowspan="2" and the last element <td> , so 3 cells (2 + 1)
+4
source

You should try this - The table contains 3 rows and 3 columns

In the first line you need three cells, so three td in the first tr

The second line needs two cells, the first td with rowspan=2 and colspan = 2 , the second without a space.

and the third row needs only one cell without any range.

 <table border ="1" cellpadding="0" cellspacing ="0" > <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td colspan="2" rowspan="2">&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> </table>
+3
source

Source: https://habr.com/ru/post/1440724/

More articles:


All Articles