HTMLの基本チュートリアルのテーブルタグ
テーブルラベル
もちろん、Excelにも同様の機(jī)能があります
。 | ||
テーブルの構(gòu)造
<table>
;/td>
<td></td>
lt;/table>
<table> ;屬性Width: テーブルの幅。単位はパーセントまたは固定値です。
高さ: テーブルの高さ。
Align: 表の水平方向の配置、値: 左、中央、右
Border: 境界線の太さ。
- 境界線の色: 境界線の色。
- bgColor: テーブルの背景色。
- 背景: 背景畫像の URL。
- cellpadding: セルの端と內(nèi)容の間の距離 (パディング距離)
- cellpacing: セル間の距離 (間隔)
- ルール: セルの境界線を結(jié)合、値: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>設(shè)計師</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: 行內(nèi)のテキストは水平方向に中央揃え、値: left、center、right
valign: 垂直方向の中央揃え、値: 上、中央、下
<td> は通常のセル、<th> は太字で中央に表示されます。
width: セルの幅
height: セルの高さ
background: セルの背景畫像
- align: 水平配置
valign: 垂直配置- 行範(fàn)囲: 上部と下部のセルを結(jié)合します。結(jié)合屬性は最初のセルに配置する必要があります。
- Colspan: 左右のセルを結(jié)合します。結(jié)合するときは、各行のセルの數(shù)が変わらないように、加算と減算を行う必要があります。
- 例:
<!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 として記述されている場合、屬性は大文字と小文字を區(qū)別します
各屬性を入力して出力効果を確認(rèn)できます
表にタイトルと概要を追加
要約 概要の內(nèi)容はブラウザには表示されません。その機(jī)能は、表の可読性 (意味化) を高め、検索エンジンが表の內(nèi)容をよりよく理解できるようにすること、また、スクリーン リーダーが特別なユーザーが表の內(nèi)容を読みやすくできるようにすることです。
構(gòu)文: <表の概要="表の紹介文">
タイトル
は、表の內(nèi)容を説明するために使用されます。タイトルは表の上部に表示されます。構(gòu)文:
<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>
