WEBデザインの勉強

WEB制作初心者が1から勉強するブログ。

HTMLでテーブル(表)を作る

f:id:mmmmofu:20160714113844p:plain

http://efu.sakura.ne.jp/web/0319/

table(テーブル)

HTMLで表を作る時に使う。

tr(Table Row)

1行でその中にthやtdを記述する。

th(table header cell)

項目名

td(Table Data)

内容。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTMLでテーブル(表)を作る</title>
</head>
<body>
<h1><a href="http://d.hatena.ne.jp/webmaster-web/20150316/p1" target="_blank">表の練習</a></h1>
<table border="1" width="300">
  <tr>
    <th>項目</th><td>内容A</td><td>内容B</td>
  </tr>
  <tr>
    <th>授業内容</th><td>HTML</td><td>Illustrator</td>
  </tr>
</table>
</body>
</html>

tableを使う時の例
フォーム
会社概要
など

セルの統合

f:id:mmmmofu:20160808204305p:plain

水平方向の結合(初期値は 1)

colspan="統合するセルの数"

垂直方向の結合(初期値は 1)

rowspan="統合するセルの数"
<table border="1" width="300">
<tr>
<th colspan="3">項目</th>
</tr>
<tr>
<th>授業内容</th><td>HTML</td><td>Illustrator</td>
</tr>
</table>
</table>
<table border="1" width="300">
<tr>
<th rowspan="2">項目</th><td>内容A</td><td>内容B</td>
</tr>
<tr>
<td>HTML</td><td>Illustrator</td>
</tr>
</table>

関連記事

mmmmofu.hatenablog.com