HTMLでテーブルを作成する方法

このWikiHowでは、HTMLを使って基本的な情報テーブルを作成する方法と、テーブルにボーダーなどの便利な要素を追加する方法を説明します。

パート1

表を作成する

1. テキスト編集プログラムを開きます。WindowsではNotepad++、MacではTextEditが一般的です。これらのプログラムを見つけるには

   • Windows - Start
     を開き、Start に notepad と入力し、ウィンドウの一番上にある Notepad をクリックする。
   • Mac - Spotlight
     を開き、textedit と入力し、Spotlight 検索フィールドの下にある TextEdit をクリックします。
2. <table>と入力し、↵Enterキーを押します。<table>タグは表の開始を示し、↵ Enterを押すとテキストエディタに改行を促します。

   • HTMLを使用する場合は、コード行を作成した後に↵ Enterキーを押して次の行に進む必要があります。
3. <tr>と入力して↵Enterキーを押します。このコマンドは、テーブルの特定の要素を作成することを示します。
4. テーブルに列を追加します。<th>を入力して列を示し、列のラベルを入力し、</th>を入力して列を閉じ、↵Enterキーを押します。

   • 例：「犬の数」というラベルのテーブル列を作成するには、テキストエディタに <th>Number of Dogs</th> と入力します。
5. 列を増やす。テーブルのカラムの数によって、このステップは異なります。使用したい列をすべて追加したら、次のステップに進みます。

   • 列は左から右に作成されます。
6. </tr>と入力し、↵Enterキーを押します。このコマンドは、テーブルのすべての列が作成されたことを示し、テーブルのコードのそのセクションを閉じます。
7. もう一度<tr>と入力し、↵Enterキーを押します。これでテーブルに行が追加されます。
8. テーブルにセルを追加します。<td>を入力して最初の列の下に情報を示し、情報を入力し、</td>を入力してセルを閉じ、↵Enterキーを押します。

   • 例：数字「23」のセルを作成するには、テキストエディタに<td>23</td>と入力します。
9. テーブルにセルを追加します。行のセルの数は列の数と関連付ける必要があります。例えば、列が3つある場合は、行のセルも3つにする必要があります。行全体を作成したら、次に進むことができます。
10. 現在の行を閉じる。</tr>と入力し、↵Enterキーを押して行を閉じます。この時点で、<tr>と入力して↵Enterキーを押して別の行を開き、個々のセルを追加してから行を閉じることができます。
11. 表を閉じます。表の最終行の下に</table>と入力します。これは表の終わりを示します。
12. 表を見直す。表は次のようになるはずです：

    • <table>
    • <tr>
    • <th>日
    • <月></月
    • <月>年</月
    • </tr>
    • <tr>
    • <td>4月</td
    • <td>3月</td
    • <td>1990年</td
    • </td> </tr
    • <tr> <td>1990</td> </tr> <td>1990</td
    • <td>27年</td
    • <td>7月</td
    • <td>1993年</td
    • </td> </tr
    • </表
13. 作業を保存します。Ctrl+S（Windows）または⌘Command+S（Mac）を押して文書を保存し、文書の名前を入力し、プロンプトが表示されたら保存をクリックします。

パート2

テーブル修飾子の追加

1. テーブルを広げます。シート上部の<table>タグを<table>に置き換えて、style="width:100%">と入力します。table "と "style "の間にスペースがあることを確認してください。

   • 最終結果は次のようになるはずだ： <table style="width:100%">.
   • パーセンテージを変えてみることもできる。例えば、100の代わりに50を入力すると、テーブルの幅が半分になります。
2. 表の枠を作る。文書の一番上、<table>タグの上にスペースを作り、次のようにします：

   • <style>と入力し、↵Enterキーを押します。
   • table, th, td {と入力し、↵ Enterキーを押します。
   • border：1px solid black; と入力し、↵ Enterキーを押します。
   • border-collapse: collapse; と入力し、↵ Enterキーを押します。ボーダーを1行ではなく2行にしたい場合は、この行をスキップします。
   • } と入力して ↵ Enter を押します。
   • </style> と入力して ↵ Enter を押します。
3. テーブルのラベルを追加します。<table>タグのすぐ下にスペースを作り、次のようにします：

   • <caption>と入力します。
   • 使用したいテキストを入力する（例：誕生日）
   • </caption>と入力し、↵Enterキーを押します。
     • <caption>Birthdays</caption> のようになります。

この記事は、CC BY-NC-SAの下で公開されている " How to Create a Table in HTML " を改変して作成しました。特に断りのない限り、CC BY-NC-SAの下で利用可能です。