パソコン

table要素とborder-collapseを使って一本の線の表を作る

Table要素で表を作る

表を作成するには「table」要素を使います。

<html>の<body>要素の中に<table>要素を記述してこのような表を作成してみましょう。

やり方はいたって簡単です。

tr(行)とtd(セル)を使い表を作る

<tr>は表における行を表し、中に記述される「td」の個数分右にセルができます。
<td>はセルを表し、タブで囲まれた文字はセルに入る言葉を意味します。

html文書の<body>タグの下に、このように表を作るための記述をしてブラウザに表示させると

このように線がないセルの集まりの状態を表示します、これから線を表示する方法を紹介していきます。

表に線を表す二つの方法を紹介

一つはhtmlに記述する方法、二つ目はCSSに記述する方法を紹介します。

html文書に直接記述する方法

borderを使って線を表す

<table>開始タグの中に、「border="1"」を入れて<table border="1">と記述すると下のように線が二本の状態で表示されます、ちなみに「0」にすると枠なしになります。

border-collapseを使って線を一本にする

一本の線で表示したいので「border-collapse」を使用します、これには「collapse」と「separate」があります。

「collapse」は二重になっている線を重ねて一本にするもの。
「separate」は各セルの間を開けて表示するものです。

先ほどの記述の後に半角スペースを開けてstyle属性にborder-collapse: collapseと記述します。

これで二重の線が一本の線になりました。

表をtable要素で作る

ついでにセルに色を付けてみましょう

background-colorを使います、「;」セミコロンを付けて半角スペースを入れその後に記述します。

複数の属性を指定する時は必ず「;」セミコロンで区切って半角スペースを入れましょう。

このようにhtml文書に記述をしていけば、このように表を作ることができますが、html文書自体が長くなり見にくくなるので、CSSに記述して見た目をすっきりしていきたいと思います。

CSSに記述する方法

CSSファイルに、テーブルと行とセルに線を付けるように設定したのが下の記述です。

これだと最初の画像よりも窮屈なように見えますのでパディングを使って余裕を持たせます。

paddingを使って余白を作る

線と文字の間隔が狭いので「padding」を使って文字の周りに余白を作ってみましょう。

値が二つの場合は最初が上下を表し二つ目が左右の余白を表しています、文字の一番長いのを基準にして左揃えになっているので右の余白が多いように見えます。

余白のことをもっと知りたいと思ったら

文字色を#909; に指定しているのでこのような色になっています。

ちなみに「td」に「text-align: center;」を設定するとこのように文字が中央揃えになります。

CSSに記述をするとhtmlの方がスッキリして見た目が良くなりますのでCSSに記述する方が作業がし易くなると思います。

table要素とborder-collapseを使って一本の線の表を作る

 いろいろな表を作れるのでこれからも記事にしていきたいと思います。

この記事が気に入ったら
フォローしよう

最新情報をお届けします

Twitterでフォローしよう

おすすめの記事