行中的某些行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

回答

相关问题