Tabele
Kolejną rzeczą jaką przydałoby się omówić są tabele.
Tabele
Każda tabela składa się z odpowiedniej kombinacji znaczników <table></table>,<tr></tr> oraz <td></td>.Konstrukcja tabeli jest stosunkowo prosta do opanowania, jednak wymaga, by każdy znacznik wprowadzić bardzo uażnie.
Oto przykładowa tabela:
1.1 | 1.2 | 1.3 |
2.1 | 2.2 | 2.3 |
A to kod tej tabeli:
<table border="1"> - ramy tabeli <tr> - początek wiersza <td> 1.1 </td> - pierwsza komórka wiersza <td> 1.2 </td> - druga komórka wiersza <td> 1.3 </td> - trzecia komórka wiersza </tr> - koniec wiersza <tr> - początek drugiego wiersza <td> 2.1 </td> <td> 2.2 </td> <td> 2.3 </td> </tr> </table>
Miejsca w tabelach można ze sobą łączyć, do tego służą dwa atrybuty colspan- odpowiedzialny za łączenie wierszami oraz rowspan- odpowiedzialny za łączenie kolumnami
Scalanie wierszami
Przykład tabeli:
1.1 | 1.2 | |
2.1 | 2.2 | 2.3 |
Kod tabeli:
<table border="1"> <tr> <td colspan="2"> 1.1 </td> <td> 1.2 </td> </tr> <tr> <td> 2.1 </td> <td> 2.2 </td> <td> 2.3 </td> </tr> </table>
Scalanie kolumnami
Przykład tabeli:
1.1 | 1.2 | 1.3 |
2.2 | 2.3 |
Kod tabeli:
<table border="1"> <tr> <td rowspan="2"> 1.1 </td> <td> 1.2 </td> <td> 1.3 </td> </tr> <tr> <td> 2.2 </td> <td> 2.3 </td> </tr> </table>
Połączone scalanie
Przykład tabeli:
1.1 | 1.3 | |
2.3 | ||
3.1 | 3.2 | 3.3 |
Kod tabeli:
<table border="1px"> <tr> <td rowspan="2" colspan="2"> 1.1 </td> <td> 1.3 </td> </tr> <tr> <td> 2.3 </td> </tr> <tr> <td> 3.1 </td> <td> 3.2 </td> <td> 3.3 </td> </tr> </table>