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

テーブルラベル

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

。

テーブルの構造

<table>

;/td>

lt;/table>

<table> ;属性

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

高さ: テーブルの高さ。

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

Border: 境界線の太さ。

注: ルールの互換性は良好ではないため、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>

提出するリセットコード

自動運転