Live
<html> <head> <title>Tabele</title> <style> table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 10px; } </style> </head> <body> <p> W komórkach widzimy aktualne wartości <code>colspan</code> (np. c2) oraz <code>rowspan</code> (np. r2): </p> <table> <!-- Nasz bazowy wiersz zajmuje 6 kolumn (posiada 6 komórek), a więc widzimy 6 tagów <td> --> <tr> <td>c1 r1</td> <td>c1 r1</td> <td>c1 r1</td> <td>c1 r1</td> <td>c1 r1</td> <td>c1 r1</td> </tr> <tr> <!-- Jedna z komórek zajmuje 2 kolumny, więc zostało miejsce tylko dla 4 dodatkowych tagów <td> --> <td colspan="2">c2 r1</td> <td>c1 r1</td> <td>c1 r1</td> <td>c1 r1</td> <td>c1 r1</td> </tr> <tr> <!-- Jedna z komórek zajmuje 4 kolumny, więc zostało miejsce tylko dla 2 dodatkowych tagów <td>, dodatkowo zajmuje również 3 wiersze, a więc musimy pamiętać, że w dwóch kolejnych wierszach mamy już na starcie dwie dodatkowe komórki w wierszu. --> <td colspan="4">c4 r1</td> <td rowspan="3">c1 r3</td> <td>c1 r1</td> </tr> <tr> <!-- Używamy tylko pięciu tagów <td>, gdyż szóstą komórkę otrzymamy z poprzedniego wiersza --> <td rowspan="2">c1 r2</td> <td>c1 r1</td> <td>c1 r1</td> <td>c1 r1</td> <td>c1 r1</td> </tr> <tr> <!-- Atrybuty "rowspan" z dwóch poprzednich wierszy doają nam dwie komórki, więc mamy miejsce tylko na jeszcze jedną komórkę --> <td>c1 r1</td> <td>c1 r1</td> <td>c1 r1</td> <td>c1 r1</td> </tr> </table> <hr /> <p>Tabela z błędnie obliczoną liczbą komórek - wszędzie umieszczamy sześć tagów <code>td</code> </p> <table> <tr> <td>c1 r1</td> <td>c1 r1</td> <td>c1 r1</td> <td>c1 r1</td> <td>c1 r1</td> <td>c1 r1</td> </tr> <tr> <td colspan="2">c2 r1</td> <td>c1 r1</td> <td>c1 r1</td> <td>c1 r1</td> <td>c1 r1</td> <td>c1 r1</td> </tr> <tr> <td colspan="4">c4 r1</td> <td rowspan="3">c1 r3</td> <td>c1 r1</td> <td>c1 r1</td> <td>c1 r1</td> <td>c1 r1</td> </tr> <tr> <td rowspan="2">c1 r2</td> <td>c1 r1</td> <td>c1 r1</td> <td>c1 r1</td> <td>c1 r1</td> <td>c1 r1</td> </tr> <tr> <!-- Atrybut "rowspan" nie ma żadnego znaczenia w przypadku, gdy w tabeli nie mamy kolejnego wiersza. --> <td rowspan="2">c1 r2</td> <td>c1 r1</td> <td>c1 r1</td> <td>c1 r1</td> <td>c1 r1</td> <td>c1 r1</td> </tr> </table> </body></html> 
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.