html作成フォームページケース
5167 ワード
htmlの表作成例
htmlについて
<div id="table-info">
<h2>LIFAair LA500 </h2>
<table>
<tr>
<td width="40%"> </td>
<td width="30%"> </td>
<td width="30%"> </td>
</tr>
<tr>
<td> CADR</td>
<td>m<sup>3</sup>/h</td>
<td>450</td>
</tr>
<tr>
<td> CADR</td>
<td>m<sup>3</sup>/h</td>
<td>137</td>
</tr>
<tr>
<td> </td>
<td>m<sup>3</sup>/hW</td>
<td>6.931</td>
</tr>
<tr>
<td> </td>
<td>m<sup>3</sup>/hW</td>
<td>2.117</td>
</tr>
<tr>
<td> </td>
<td>m<sup>2</sup>/hW</td>
<td>32-54</td>
</tr>
<tr>
<td> </td>
<td>W</td>
<td>0.87</td>
</tr>
<tr>
<td>PM2.5 </td>
<td>%</td>
<td>>99.99(30min)</td>
</tr>
<tr>
<td> </td>
<td>%</td>
<td>
<p>1.33(30min)</p>
<p>98.75(3h)</p>
</td>
</tr>
<tr>
<td> ( )</td>
<td>%</td>
<td>99.99</td>
</tr>
</table>
<table class="v2">
<tr>
<td rowspan="4" width="20%"> </td>
<td width="20%"> </td>
<td width="30%">mg/m<sup>3</sup></td>
<td width="30%"> </td>
</tr>
<tr>
<td>TVOC</td>
<td>mg/m<sup>3</sup></td>
<td>0.003</td>
</tr>
<tr>
<td>PM10 </td>
<td>mg/m<sup>3</sup></td>
<td>0.002</td>
</tr>
<tr>
<td> </td>
<td>uW/cm<sup>3</sup></td>
<td> </td>
</tr>
</table>
<table class="v2">
<tr>
<td width="40%"> </td>
<td width="30%">kg</td>
<td width="30%">14.65</td>
</tr>
<tr>
<td> </td>
<td>mm</td>
<td> 300 ×800</td>
</tr>
</table>
</div>
cssについて
#table-info{
text-align: center;
background: #eff2f5;
font-family: " ";
}
#table-info h2{
color: #666;
font-size: 18px;
margin: 0px auto;
font-weight: bold;
line-height: 40px;
padding-top: 10px;
padding-bottom: 10px;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
}
#table-info table {
width: 100%;
color: #777;
font-size: 13px;
font-weight: bold;
border-spacing: 0;
border-collapse: 0;
font-family: " ";
border-top: 1px solid #fff;
border-right: 1px solid #fff;
}
#table-info table tr{
width: 100%;
}
#table-info table tr td{
padding: 8px 0px;
font-weight: bold;
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
}
#table-info table tr td sup{
font-size: 8px;
}
#table-info table.v2 {
border-top: 0px solid #000;
}