行の一部の行html

Question

画像に表示されるようなテーブルが必要なので、セルをマージしようとしましたが成功しませんでした。ここに私のコードは、マージすることなく次のとおりです。

.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>

Answer 1

簡単。 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>タグ。