HTML5 + CSS3 logó
  WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS   Ingyenes elektronikus tananyag interaktív
weboldalak készítéséhez.
Custom Search
 
vissza VISSZA    
menü MENÜ    
ismét ISMÉT    
tovább TOVÁBB    

Cellák összevonása



Egymás melletti cellák összevonása


Annak érdekében, hogy táblázatunk áttekinthető legyen:
- Összevonhatunk két vagy több egy sorban egymás mellett elhelyezkedő cellát.
- Összevonhatunk két vagy több egy oszlopban egymás mellett (alatt, felett) elhelyezkedő cellát.

A <td> és <th> elemek összevonásra szolgáló jellemzői:

Név Érték Leírás Böngészők
rowspan rowspan Értéke megadja, hogy adott cella hány sor magas lesz. (cellák egyesítése függőlegesen - sorátfogás) Chrome logó Firefox logó Safari logó Opera logó IE logó
colspan colspan Értéke megadja, hogy adott cella hány oszlop széles lesz (cellák egyesítése vízszintesen - oszlopátfogás) Chrome logó Firefox logó Safari logó Opera logó IE logó

Példa:

Forráskód




<h2>Oszlopátfogás</h2>
<table border="1">
  <caption>A táblázat címe </caption>
  <tr>
       <td colspan="2"> 1. sor két összevont cellája</td>
  </tr><tr>
       <td> 2. sor és 1. oszlop </td>
       <td> 2. sor és 2. oszlop </td>
  </tr>
</table>  
			
<h2>Sorátfogás</h2>
<table border="1">
  <caption>A táblázat címe </caption>
  <tr>
       <td rowspan="2"> 1. oszlop két összevont cellája </td>
       <td> 1. sor és 2. oszlop </td>
  </tr><tr>
       <td> 2. sor és 2. oszlop </td>
  </tr>
</table>  
 

Eredmény*


* Az eredmény megjelenítése az Ön által használt böngészőtől függ.
A példakód külön ablakban is megtekinthető: html5_tablazat_cellaosszevonas.html