table 表 / HTML・CSS・Bootstrap

１．見出しが横並びの場合

＜HTML＞

<tbody>
     <tr>
         <th></th>
         <td></td>
     </tr>
                        ...............
</tbody><tr>

上の表だと味気ないので、スタイルを設定していく。

これだけで、 bootstrapのデフォルト設定で水平線は表示してくれる

垂直線を追加する場合は、
<tabel class= "tabel table-bordered">
...</table> 
table-bordered を追加する

上の画像のように見出しにグレーの背景色をつける場合

<th class= “active”> これだけです。

activeはBootstrap 特有の色表現

見出しが中央揃えになってます。

<th class= “center”>　これだけ

水平方向に結合：colspan="セルの数"
垂直方向に結合：rowspan="セルの数"