SATO GEN'S SITE
【CSS】tableタグの使い方
2019/06/13

tableタグとは、表を作るときに用いるものです。

 

基本的な構造として、以下のような形を取ります。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>Tableタグとは</title>
</head>
<body>
    <table>
            <tr>
                <th>ハードウェアの5大要素</th>
                <td>制御装置</td>
                <td>演算装置</td>
                <td>出力装置</td>
                <td>入力装置</td>
                <td>記憶装置</td>
            </tr>
            <tr>
                <th>実行されている場所</th>
                <td>CPU、プロセッサ</td>
                <td>CPU、プロセッサ</td>
                <td>ディスプレイ</td>
                <td>マウス、キーボード</td>
                <td>メモリ、HDD、SSD</td>
            </tr>
　</table>
</body>
</html>

まず、tableタグで囲みます。

これにより、表を作る準備が整いました。

 

trタグで、表の行を指定します。

trは、table rowの略で、表の行とわかるので覚えやすいです。

 

thタグでは、表中の強調したいものを指定します。

指定すると、太文字になります。

 

そして、行の要素を指定するために、tdを指定し、そのなかに表に入れたい要素値を入れます。

tdは、table dataの略で、表のデータと覚えられますね。

 

このように、それぞれ、表の中で役割があり、

それぞれを使い分ける事により、うまく表を作ることが可能になります。

 

 

最新の投稿です！