カスタム検索

テーブル(表)

HTMLとXHTMLでは、テーブル(表)を扱うことができます。Webページでテーブルは表としての用途以外でもよく使用されるので、しっかりとマスターしておくことをおすすめします。

まずは簡単な例を紹介します。入力例の通りに記述して確認してください。新しく登場するタグは、<table><tr><td>の3つです。

table.html
<html>
    <head>
        <title>簡単なテーブルの例</title>
    </head>
    <body>
        <h1>簡単なテーブルの例</h1>
        <table border="1">
            <tr>
                <td>太郎</td>
                <td></td>
            </tr>
            <tr>
                <td>花子</td>
                <td></td>
            </tr>
        </table>
    </body>
</html>

新しく登場したタグの説明の前に、テーブルについての用語を1つ覚えてください。テーブル(表)の個々の欄のことをセルといいます。セル(Cell)は、英語で「部屋」、「独房」という意味です。この例の場合、「左上のセルには太郎が記述されている」という使い方をします。

<table>タグ

<table>タグは、テーブルであることを定義します。border属性は縁取り(枠線)を指定し、値には縁取りの太さを数値で指定します。数が大きくなるほど太くなります。border属性を指定しなければ縁取りは表示されません。

<tr>タグ

<tr>タグ(Table-Row)は、横方向の列を定義し、新しい行を追加します。<tr>タグは、<td>あるいは、次ページで説明する<th>タグを必ずネストします。

<td>タグ

<td>タグ(Table-Data)は、<tr>タグで定義された行にテキストなどのデータを格納するセルを追加します。この<td>の開始タグと終了タグの間に、実際に表示させるテキスト、画像(<img>タグ)などを記述します。<td>の要素を増やせば、セルは横方向に増えていきます。

まとめ
  • テーブルの欄のことを「セル」という
  • <table>でテーブルを定義
  • <tr>で新しい行を追加
  • <td>でセルを定義
CopyLeft 2017 Webデザインレッスン プライバシーポリシー サイト管理者に連絡