HTMLの基本チュートリアルの...LOGIN
简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）

HTMLの基本チュートリアルのテーブルタグ

テーブルラベル

もちろん、Excelにも同様の機能があります


。




テーブルの構造

<table>

;/td>

<td></td>

lt;/table>

<table> ;属性

Width: テーブルの幅。単位はパーセントまたは固定値です。

高さ: テーブルの高さ。

Align: 表の水平方向の配置、値: 左、中央、右

Border: 境界線の太さ。

    境界線の色: 境界線の色。

    • bgColor: テーブルの背景色。

    • 背景: 背景画像の URL。

    • cellpadding: セルの端と内容の間の距離 (パディング距離)

    • cellpacing: セル間の距離 (間隔)

    • ルール: セルの境界線を結合、値:all

  • 注: ルールの互換性は良好ではないため、CSS を使用して置き換えてください。

  • 実際に表を描いてみましょう

    <!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
     <table border="2" width="300" height="100" bordercolor="blue" bgColor="#88cc66" cellspacing="0" cellpadding="2" rules="all">
         <tr>
             <td>工号</td>
             <td>姓名</td>
             <td>职位</td>
         </tr>
         <tr>
             <td>001</td>
             <td>小明</td>
             <td>设计师</td>
         </tr>
         <tr>
             <td>002</td>
             <td>小方</td>
             <td>工程师</td>
         </tr>
         <tr>
             <td>003</td>
             <td>小白</td>
             <td>程序员</td>
         </tr>
     </table> 
    </body>
</html>

  • <tr>属性 - 行マーカー

bgColor: 行の背景色

高さ： 行高さ

align: 行内のテキストは水平方向に中央揃え、値: left、center、right

  • valign: 垂直方向の中央揃え、値: 上、中央、下

    • <td> は通常のセル、<th> は太字で中央に表示されます。

    width: セルの幅

    height: セルの高さ

    bgColor: セルの背景色

    background: セルの背景画像

    • align: 水平配置

    • valign: 垂直配置

    • 行範囲: 上部と下部のセルを結合します。結合属性は最初のセルに配置する必要があります。

    • Colspan: 左右のセルを結合します。結合するときは、各行のセルの数が変わらないように、加算と減算を行う必要があります。

    • 例: 
      • <!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
     <table border="2" width="400" height="100" bordercolor="blue" bgColor="#88cc66" cellspacing="0" cellpadding="2" rules="all">
         <tr bgColor="red" align="center">
             <th>星期日</th> 
             <th>星期一</th>
             <th>星期二</th>
             <th>星期三</th>
             <th>星期四</th>
             <th>星期五</th>
             <th>星期六</th>
         </tr>
         <tr bgColor="yellow" align="center">
             <td height="50">25</td>
             <td>26</td>
             <td>27</td>
             <td>28</td>
             <td>29</td>
             <td>30</td>
             <td>1</td>
         </tr>
         <tr align="center">
             <td  height="50">2</td>
             <td>3</td>
             <td>4</td>
             <td>5</td>
             <td>6</td>
             <td>7</td>
             <td>8</td>
         </tr>
     </table> 
    </body>
</html>

    • 注: bgColor が bgcolor として記述されている場合、属性は大文字と小文字を区別します

    • 各属性を入力して出力効果を確認できます

    キャプションタグ

    表にタイトルと概要を追加


    要約 概要の内容はブラウザには表示されません。その機能は、表の可読性 (意味化) を高め、検索エンジンが表の内容をよりよく理解できるようにすること、また、スクリーン リーダーが特別なユーザーが表の内容を読みやすくできるようにすることです。

    構文: <表の概要="表の紹介文">

    タイトル

    は、表の内容を説明するために使用されます。タイトルは表の上部に表示されます。

    構文:

    <table> <caption>タイトルテキスト</caption>

    <tr>

    lt;/td>

    … </tr>…

    </table>

    例: 

    <!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
     <table border="2" width="400" height="100" bordercolor="blue" bgColor="#88cc66" cellspacing="0" cellpadding="2" rules="all"summary="日历信息">
         <caption>2016.10日历</caption>
         <tr bgColor="red" align="center">
             <th>星期日</th> 
             <th>星期一</th>
             <th>星期二</th>
             <th>星期三</th>
             <th>星期四</th>
             <th>星期五</th>
             <th>星期六</th>
         </tr>
         <tr bgColor="yellow" align="center">
             <td height="50">25</td>
             <td>26</td>
             <td>27</td>
             <td>28</td>
             <td>29</td>
             <td>30</td>
             <td>1</td>
         </tr>
         <tr align="center">
             <td  height="50">2</td>
             <td>3</td>
             <td>4</td>
             <td>5</td>
             <td>6</td>
             <td>7</td>
             <td>8</td>
         </tr>
     </table> 
    </body>
</html>



    次のセクション

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <table border="2" width="300" height="100" bordercolor="blue" bgColor="#88cc66" cellspacing="0" cellpadding="2" rules="all"> <tr> <td>工号</td> <td>姓名</td> <td>职位</td> </tr> <tr> <td>001</td> <td>小明</td> <td>设计师</td> </tr> <tr> <td>002</td> <td>小方</td> <td>工程师</td> </tr> <tr> <td>003</td> <td>小白</td> <td>程序员</td> </tr> </table> </body> </html>
    提出するリセットコード
    章コースウェア