Table

table（表）
セル行(row)
列(col)

セル行(row)
列(col)
<table>
<tr><td>○○</td><td>○○</td><td>○○</td></tr>
<tr><td>セル</td><td>○○</td><td>○○</td></tr>
</table>
table（表）

<table>
</table>
table（表）
１行目を
見出しセルに
変更する
A B C
セル行(row)
列(col)

A B C
セル行(row)
列(col)
<table>
<tr><th>A</th><th>B</th><th>C</th></tr>
</table>
見出し
table（表）

A B C
セル行(row)
列(col)
<table>
<tr><th scope= col >A</th><th scope= col >B</th><th
scope= col >C</th></tr>
</table>
見出し
table（表）
scope= col
見出しの対象の
方向
アクセシビリティ

A
B
C
D
行(row)
列(col)
<table>
<tr><th scope= row >A</th><td>○○</td><td>○○</td></tr>
<tr><th scope= row >B</th><td>○○</td><td>○○</td></tr>
<tr><th scope= row >C</th><td>○○</td><td>○○</td></tr>
<tr><th scope= row >D</th><td>○○</td><td>○○</td></tr>
</table>
見出し
table（表）
scope= row
見出しの対象の
方向
アクセシビリティ

table（表）
行(row)
列(col)

行(row)
列(col)
table（表）

colspan= 2行(row)
＊横方向に連結（列colを連結）
列(col)
table（表）

colspan= 2行(row)
列(col)
<table>
<tr><td>○○</td><td>○○</td><td>○○</td><td>○○</td></tr>
<tr><td>○○</td><td colspan= 2 >○○</td><td>○○</td></tr>
</table>
＊横方向に連結（列colを連結）
table（表）

行(row)
table（表）
列(col)

rowspan
=
行(row)
列(col)
＊縦方向に連結（行rowを連結）
table（表）

rowspan
= 3
行(row)
列(col)
table（表）

rowspan
= 3
行(row)
列(col)
<table>
<tr><td>○○</td><td>○○</td><td rowspan="3">○○</td><td>○○</
td></tr>
</table>
table（表）

あいう
えおか
きくけ
table（表）
<table>
<tr><td>あ</td><td>い</td><td>う</td></tr>
<tr><td>え</td><td>お</td><td>か</td></tr>
<tr><td>き</td><td>く</td><td>け</td></tr>
</table>
表に枠線をつけたい

あいう
えおか
きくけ
table（表）
<table>
</table>
表に枠線をつけたい
こんな感じ

table（表）
<table>
</table>
td{
border: solid 1px #000000;
}

table（表）
table{
border-collapse: collapse;
}
td{
border: solid 1px #000000;
}
<table>
</table>

Table

Recommended

Recommended

More Related Content

More from sayoko miura

More from sayoko miura (20)

Table