1ヶ月でWebデザイン・プログラミングスキルをオーダーメイドのカリキュラムで学べるスクール、それがWebCamp。

子供の想像力を伸ばしアイデアを形にする小学生向けプログラミング教室「プロスタキッズ」

【HTML入門】表(テーブル)に様々な罫線をつける方法

Pocket

tableタグで表を作ることはできますが、そのままでは罫線がついていません。それぞれの要素が一定の間隔で点在しているだけでは見づらいので、罫線を付けて見やすくしましょう。

表に罫線をつける

表に罫線をつけるには、<table>タグにborder属性を指定します。たとえば、<table border=”1″>という形です。
これで、表のセルを1つずつ区切る罫線をまとめてつけることができます。
枠線がないと読みづらいので、表を作るときにはborder属性もセットで指定しましょう。

ただし、border属性で作成できる罫線は立体的なものです。Excelの表のようなものを想像すると、驚かれるかもしれません。
border属性にさらにいくつかの指定をすることで、境界線の太さや色などを一括で指定できます。

罫線の太さを指定するには

標準の太さの罫線を引くには、上の例のように<table border=”1″>と指定します。これで幅1ピクセルの罫線が引けます。
border属性で指定する数を増やすと、幅の太い罫線を引くことができます。

<table border=”0″>と指定すると、罫線の幅は0ピクセル、つまり罫線なしの表になります。
また、border属性を指定しないと<table border=”0″>と同じと解釈され、罫線なしの表になります。

罫線の色を指定

border属性で数を1以上に指定し、罫線を表示できる状態なら、罫線の色を指定することができます。

罫線の色は、<table>タグでbordercolor属性を指定することで指定します。色は16進数か色名で指定します。
たとえば<table border=”1″ bordercolor=”red”>または<table border=”1″ bordercolor=”#ff0000″>と指定すると、罫線の外側が赤になります。
通常の立体的な罫線なので、外側部分のみ赤になり、内側は白のままになります。

border属性を指定しない、または<table border=”0″>に指定すると罫線なしの表になるので、罫線の色も指定できません。bordercolor属性を指定しなければ、通常は外側がグレイ、内側は白の立体的な線になります。

罫線の種類を指定

罫線の種類を自由に指定するには、スタイルシートを使います。

スタイルシートで罫線に鉛筆で引いたような細い線にしたり、立体的でない線を引いたり、点線や破線にしたりすることもできます。4方向すべて違う種類の線を引くこともできます。

普通の罫線の表

HTML上の表示

太くて赤い罫線の表

HTML上の表示

投稿者:プロスタ編集部

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

初心者がプログラミングで挫折しない学習方法を無料動画で公開中。オンラインに特化したプログラミングスクール「TechAcademy(テックアカデミー)」が解説。

この記事が気に入ったら
いいね!しよう

プロスタの最新情報をお届けします

あわせて読みたい

関連記事

ページ上部へ戻る