19. Tabele rowspan, colspan

Wcześniej tworzyliśmy tabeli o takiej samej liczbie komórek w wierszu. Ale komórki można łączyć ze sobą. Robi się to za pomocą atrybutu colspan i rowspan. Colspan – łączy komórki poziomo, Rowspan – łączy komórki pionowo. Przykład tabeli gdzie komórki zostały połączone poziomo:

<table>
	<tr>
		<td colspan="3">3 komórki połączone
	<tr>
		<td>Jedna komórka
		<td>Jedna komórka
		<td>Jedna komórka
</table>
Przykład tabelki gdzie komórki zostały połączone pionowo
<table>
	<tr>
		<td>Kolumna 1
		<td colspan="3">Kolumna 2
		<td>Kolumna 3
	<tr>
		<td>Kolumna 1
		<td>Kolumna 3
	<tr>
		<td>Kolumna 1
		<td>Kolumna 3
</table>

Oczywiście tabelki mogą być bardziej skomplikowane np.:

 

 

 

 

 

 

 

 

 

 

 

Kod HTML do utworzenia powyższej tabelki

<table>
    <tr>
        <td rowspan="2">Komórka</td>
        <td>Komórka</td>
        <td colspan="2">Komórka</td>
    </tr>
    <tr>
        <td rowspan="2">Komórka</td>
        <td>Komórka</td>
        <td>Komórka</td>
    </tr>
    <tr>
        <td>Komórka</td>
        <td rowspan="2">Komórka</td>
        <td>Komórka</td>
    </tr>
    <tr>
        <td>Komórka</td>
        <td>Komórka</td>
        <td>Komórka</td>
    </tr>
</table>