2010-10-01 8 views

Odpowiedz

82

Na realizację że jesteś zaznajomiony z colspan, to domniemywa się, że jesteś również zaznajomiony z rowspan, więc pomyślałem, że rzucam się za darmo.

Ważną kwestią zauważyć, przy użyciu rowspan: Poniższe tr elementy musi zawierają mniej td elementy, ze względu na komórki za rowspan w poprzednim rzędzie (lub poprzedniego rzędach).

CSS:

table {border: 1px solid #000; border-collapse: collapse; } 
th, td {border: 1px solid #000; } 

html:

<table> 
    <thead> 
     <tr> 
      <th colspan="2">Column one and two</th> 
      <th>Column three</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td rowspan="2" colspan="2">A large cell</td> 
      <td>a smaller cell</td> 
     </tr> 
     <tr> 
      <!-- note that this row only has _one_ td, since the preceding row 
       takes up some of this row --> 
      <td>Another small cell</td> 
     </tr> 
    </tbody> 
</table> 

demo pod adresem: jsbin

+20

To najbardziej entuzjastyczna * i rozgrzewająca reakcja, jaką kiedykolwiek słyszałem podczas omawiania tabel html ... =) –

+1

Znaleziono to demo, które jest dość pouczające: http://www.w3schools.com/tags/ tryit.asp? plik = tryhtml_table_span – unmircea

14

colspan:

<table> 
    <tr> 
     <td> Row 1 Col 1</td> 
     <td> Row 1 Col 2</td> 
</tr> 
<tr> 
     <td colspan=2> Row 2 Long Col</td> 
</tr> 
</table> 
Powiązane problemy