행의 일부 행 html

이미지에 표시되는 것과 같은 테이블을 원하지만 셀을 병합하려했지만 성공하지 못했습니다. 여기 내 코드는 병합하지 않고 있습니다 :행의 일부 행 html

I want table such like that as show in image, I tried to merge cells but not succeed. here is my code without merging.

.tftable {margin: 10px auto;font-size:12px;color:#333333;width:auto;border-width: 1px;border-color: #5e823a;border-collapse: collapse;} 
 
.tftable th {font-weight: 800;font-size:24px;background-color:#46622a;border-width: 2px;padding: 8px;border-style: solid;border-color: #5e823a;text-align:left;color: #fcfcfc;} 
 
.tftable tr {background-color:#88b35d;} 
 
.tftable td {font-weight: 600;font-size:18px;border-width: 2px;padding: 8px;border-style: solid;border-color: #5e823a;}

<table class="tftable" border="1"> 
 
\t <tr> 
 
\t \t <th>SuperVisors</th> 
 
\t </tr> 
 
</table> 
 
<table class="tftable" border="1"> 
 
\t <tr> 
 
\t \t <th>Armina</th> 
 
\t \t <th>Saleen</th> 
 
\t \t <th>Julia</th> 
 
\t \t <th>Samina</th> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td><img src="http://www.dhresource.com/albu_962922772_00/1.200x200.jpg" alt="Super Visors" height="200" width="200"></td> 
 
\t \t <td><img src="http://www.dhresource.com/albu_962922772_00/1.200x200.jpg" alt="Super Visors" height="200" width="200"></td> 
 
\t \t <td><img src="http://www.dhresource.com/albu_962922772_00/1.200x200.jpg" alt="Super Visors" height="200" width="200"></td> 
 
\t \t <td><img src="http://www.dhresource.com/albu_962922772_00/1.200x200.jpg" alt="Super Visors" height="200" width="200"></td> 
 
\t </tr> 
 
</table>

출처

2016-08-13 Muhammad Noman

관련 항목 : http://stackoverflow.com/questions/9830506/how-do-you-use-colspan-and-rowspan-in-html-tables – kolboc

쉽습니다. colspan 속성 :

.tftable {margin: 10px auto;font-size:12px;color:#333333;width:auto;border-width: 1px;border-color: #5e823a;border-collapse: collapse;} 
 
.tftable th {font-weight: 800;font-size:24px;background-color:#46622a;border-width: 2px;padding: 8px;border-style: solid;border-color: #5e823a;text-align:left;color: #fcfcfc;} 
 
.tftable tr {background-color:#88b35d;} 
 
.tftable td {font-weight: 600;font-size:18px;border-width: 2px;padding: 8px;border-style: solid;border-color: #5e823a;}

<table class="tftable" border="1"> 
 
    <thead> 
 
\t <tr> 
 
\t \t <th colspan="4">SuperVisors</th> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <th>Armina</th> 
 
\t \t <th>Saleen</th> 
 
\t \t <th>Julia</th> 
 
\t \t <th>Samina</th> 
 
\t </tr> 
 
    </thead> 
 
    <tbody> 
 
\t <tr> 
 
\t \t <td><img src="http://www.dhresource.com/albu_962922772_00/1.200x200.jpg" alt="Super Visors" height="200" width="200"></td> 
 
\t \t <td><img src="http://www.dhresource.com/albu_962922772_00/1.200x200.jpg" alt="Super Visors" height="200" width="200"></td> 
 
\t \t <td><img src="http://www.dhresource.com/albu_962922772_00/1.200x200.jpg" alt="Super Visors" height="200" width="200"></td> 
 
\t \t <td><img src="http://www.dhresource.com/albu_962922772_00/1.200x200.jpg" alt="Super Visors" height="200" width="200"></td> 
 
\t </tr> 
 
    </tbody> 
 
</table>

주 <tbody> 및 <thead> 태그입니다.

출처

2016-09-23 08:43:33

행의 일부 행 html

답변

관련 문제