HTML テーブルのチップス

投稿日 2015/01/18

[Home] [Index] 

画面に中央に表示するには

style="margin-left:auto; margin-right:auto;" を指定するとテーブルをページの中央に表示できます。

*********** +++++++++++ ***********
+++++++++++ *********** +++++++++++
<table style="margin-left:auto; margin-right:auto;">
  <tr>
    <td>***********</td>
    <td>+++++++++++</td>
    <td>***********</td>
  </tr>
  <tr>
    <td>+++++++++++</td>
    <td>***********</td>
    <td>+++++++++++</td>
  </tr>
</table>

境界線を単純な直線にするには

デフォルトではテーブルの境界線は表示されません。border スタイルを設定して表示するようにしても、セルとテーブル、セルとセルの間が離れていて、二重線のように境界線が表示されます。

これを避けるには、border-collapse スタイルを "collapse" に設定します。これは、table タグだけでなく td タグにも設定する必要があります。

<table style="border: solid thin gray; border-collapse: collapse">
 <tr>
  <td  style="border: solid thin gray; border-collapse: collapse">...</td>
 詳細..

セルを結合するには

セルを隣どうしで結合するには colspan 属性を設定します。上下方向の場合は、rowspan 属性を設定します。

 詳細..

キャプションを付けるには

table タグの内側で caption タグを定義すると表にキャプション(表題)を付けることができます。

 詳細..

先頭行を表題行とするには

先頭行を表題行とするには、thead タグで先頭行を囲み、td タグの代わりに th タグを使います。

 詳細..

最終行を合計行とするには

最終行を合計行とするには、tfoot タグで最終行を囲みます。

 詳細..

1行おきに背景色を変えるには

自動で1行おきに背景色を変えるには JavaScript を使う必要があります。手動の場合は、tr タグの background-color を設定すると、その行全体の背景色が変更できます。

 詳細..

境界線の幅や種類を変えるには

境界線 (罫線) の幅、種類、色などは border スタイルで変更できます。境界線は table タグ、td タグごとに設定する必要があります。

 詳細..

セル内の余白を変えるには

セルの余白は、padding スタイルで設定できます。

 詳細..

セル内のテキストを中央揃えにするには

セル内のテキストを中央揃えにするには text-align スタイルを center にします。

<td style="text-align:center;">ABC</td>


 

 


 このページの先頭  [Home]

 開設 2014年12月   著作権 2014-2015 bonk.red  連絡先: TEL 111-222-3333 MAIL sales@xxxxx.jp