15-8_Naming your table

1
15-8_Naming your table
2
3
4 ■ Naming your table
5 Our table is missing a title. We want to add a title row that goes all the
way across the top.
6
7 To do so, we need to use the colspan attribute for the <th> tag. By
default, table cells take up 1 column. If we want a table cell to take up
the space of 3 columns instead of 1, we can set the colspan attribute to 3.
8
9 It looks like this:
10
<th colspan="3">3 columns across!</th>
11
12
13 □ Instructions
14 Go to the Result view. We've added the title row for you, but it only
spans 1 column right now.
15 Make the column span 2 columns with the colspan attribute. Adding the
attribute colspan="2" to a <th> tag should do the trick.
16 Return to the Result view again. Our title spans 2 columns now!
17
18
19
20 ○単語・熟語・文型
21 across
22
(副詞)直径で, さしわたしで, 幅で
23
The pond is five yards across.
24
その池は直径が5ヤードある（＝... wide.）.
25
[ジーニアス英和（第4版）・和英（第3版）辞典]
26
27
28
29 ○説明&補足
30 ■ Naming your table
31
/ テーブルに名前をつけよう！
32
33 さて、私たちが作ったテーブルには、「タイトル/名前」が、ありませんね。
34 「テーブルのタイトル」のために、⼀番上に、タイトルのための⾏が欲しいですね。
35
36 そのためには、
37
<th>開始タグ
38 に、
39
colspan属性（セルが横⽅向にまたがる縦列の数を指定）
40 を、追加する必要があります。
41
42 属性(colspan attribute)を、付けない状態（デフォルト）では、
43
横にまたがるセル 1個分
44 の、
45
幅
46 に、なっています。
47
48 例えば、
49
縦3列分の横幅
50 を、
51
1つのセル
52 にしたい時は、
53
<th colspan="3">
54 のように、
55
属性の値を、
56
3
57 にすればいいのです。
58
59 セルを縦3列分の幅にする時のコード:
60
<th colspan="3">3列分の幅を持つセルだ！</th>
61
62
63 □ Instructions:　あなたへのミッション
64 ============================================
65 <html>
66
67
68
<head>
<title>Table Time</title>
</head>
69
70
<body>
71
72
<table border="1px">
73
<thead>
74
<tr>
75
<th>有名モンスターたちの⽣まれた年</th>
76
</tr>
77
<tr>
78
<th>モンスター</th>
79
<th>⽣年⽉⽇</th>
80
</tr>
81
</thead>
82
<tbody>
83
<tr>
84
<td>キングコング</td>
85
<td>1933</td>
86
</tr>
87
88
<tr>
89
<td>吸⾎⻤ドラキュラ</td>
90
<td>1897</td>
91
</tr>
92
93
<tr>
94
<td>フランケンシュタインの花嫁</td>
95
<td>1935</td>
96
</tr>
97
98
</tbody>
</table>
99
100
</body>
101
102 </html>
103 ============================================
104
[実⾏画⾯]は、このpdfの次に、リンクがあります。
105
106
15-8_修正前のHTML実⾏画⾯.html
を、クリックすると⾒れます。
107
/ Codecaemyを、⾒ればいいとお思いでしょうが、
108
/ ここは、いつリニューアルされてもおかしくありません。
109
/ ので、このサイトがその時も死なないようにするためです。
110
/ デュアルディスプレイの方なら、2つブラウザを開けば、⾒やすいでしょう。
111
/ よほどパソコンが好きな方でないともったいないと思いますが。
112
113 01.　⼀番右にある、実⾏結果画⾯を⾒てみましょう。
114
あなたのために、すでに、
115
⼀番上の⾏の
116
テーブルタイトル
117
のためのコード
118
を、書いておきました。
119
120
しかし、それは、
121
122
たった 1列分の幅
しかありません。
123
124 02.　では、どうすれば、いいと思いますか？
125
そうです、
126
127
2列分の幅
にすれば、⾒栄えが良くなりますね。
128
129
つまり、
130
131
colspan属性
の
132
133
134
135
値
を、
2
にすればいいわけです。
136
137
138
139
140
141
具体的には、
<th>開始タグ
の中に、
colspan="2"
を、書きこめばいいわけです。
142
143 03.　さあ、やってみましょう！
144
145
146
実⾏画⾯を⾒ると、ちゃんと
2列分の幅のセル
になっていますね！
147
148
149
15-8 Naming your table

Download Report