HTMLテーブル

各テーブルには複数の行 (< tr> タグで定義) があり、各行は複数のセル (< td> タグで定義) に分割されています。文字 td はテーブルデータ、つまりデータセルの内容を指します。 < th> タグはヘッダーを定義するために使用されます。データセルには、テキスト、画像、リスト、段落、フォーム、水平線、表などを含めることができます。

これらのタグを練習するために簡単な HTML ファイルを書いてみましょう:

<html>
<title >表格</title>
<body style="font-size:20px">
    <p style="text-align:center">表格</p>  
     <table  align="center" border="1">  
            <tr>
            <td>第一行和第一列</td>
            <td>第一行和第二列</td>
            <td>第一行和第三列</td>
            </tr>
             <tr>
             <td>第二行和第一列</td>
             <td>第二行和第二列</td>
             <td>第二行和第三列</td>
             </tr>
     </table>   
</body>
</html>

これは実験的なスクリーンショットです:

QQ截图20161206113742.png

border="1" は最も外側の境界線の太さを定義し、1 です。0 に設定することもできます。これは、境界線が表示されないことを意味します (デフォルトは境界線なしです)。ここでは、それを 15 に変更して試してみます:

QQ截图20161206113812.png

テーブルの 2 つの属性を導入しましょう:colspan: このユニットの rowspan が占める列の数を制御します。 control このユニットが占有する行数

<html>
<title >表格</title>
<body style="font-size:30px">
    <p style="text-align:center">表格</p>
     <table  align="center" border="15" >
        <tr>
         <td align="center" colspan="2">第一行和第一列</td>
         </tr>
         <tr>
         <td rowspan="2">第二行和第一列 </td>
            <td>第二行和第二列 </td>
            <td >第二行和第三列</td>
         </tr>
         <tr>
         <td>第三行和第一列 </td>
            <td>第三行和第二列 </td>
         </tr>
        </table>   
</body>
</html>

よくわからない場合は、Web ページでパフォーマンスを比較してみましょう。 1 列目と 1 行目のユニットが 2 列を占めるようにし、2 行目と 1 列目のユニットが 2 行を占めるようにします。これが効果です。

QQ截图20161206114105.png

ここで簡単に説明します:

タグ: <caption>title</caption>: テーブルのタイトルを設定します。

属性: cellpadding="..."セルの余白を設定します

属性: bgcolor="..."表の背景色を設定します

属性:background= "..." 特定の画像を表として使用します背景

<table> テーブルを定義します

<caption> テーブルのタイトルを定義します。

<th> テーブルのヘッダーを定義します。

<tr> テーブルの行を定義します。

<td> 表のセルを定義します。

<thead> テーブルのヘッダーを定義します。

<tbody> テーブルの本体を定義します。

<tfoot> テーブルのフッターを定義します。

<col> テーブルの列に使用されるプロパティを定義します。

<colgroup> テーブル列のグループを定義します。

学び続ける

新しいファイル

<html> <title >表格</title> <body style="font-size:30px"> <p style="text-align:center">表格</p> <table align="center" border="15" > <tr> <td align="center" colspan="2">第一行和第一列</td> </tr> <tr> <td rowspan="2">第二行和第一列 </td> <td>第二行和第二列 </td> <td >第二行和第三列</td> </tr> <tr> <td>第三行和第一列 </td> <td>第三行和第二列 </td> </tr> </table> </body> </html>

提出するリセットコード

自動運転