読者です 読者をやめる 読者になる 読者になる

感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

テーブルを作るタグのまとめ

HTML / CSS
<スポンサーリンク>

HTMLの勉強をしました。
参考にしたのは以下の書籍。

HTML&スタイルシート トレーニングブック CSS3増補版

HTML&スタイルシート トレーニングブック CSS3増補版

勉強したことのまとめ。
★★
・マーク付きリストを作成する

<ul></ul>
<li></li>
例)
<ul>
  <li>mizky</li>
  <li>takaky</li>
  <li>tenshin</li>
</ul>

・番号付きのリストを作成する

<ol></ol>
<li></ol>
例)
<ol>
 <li>hoge</li>
 <li>fuga</li>
 <li>foo</li>

・定義型リストを作成する
→定義型リストは「見出し」と「その内容」のパターンで表示される。
最初に見出しがあって、それに続く説明文が並ぶ場合に使用する。

<dl>
  <dt>採用情報について</dt>
    <dd>弊社では新入社員を募集しております</dd>
  <dt>採用方法</dt>
    <dd>面接</dd>
</dl>

リストのマークを指定するCSSは以下の通り

list-style-type:値

・基本的なテーブルを作成する

<table>表を作成する</table>
<tr>行を作成する</tr>
<th>見出しのセルを作成する</th>
<td>セルを作成する</td>

table要素の属性
border:ボーダーの太さをピクセル数で指定する
width:table要素の幅をピクセル数か%で指定する
cellspacing="0"でセルとセルの隙間を消すことができる
・テーブルのサンプル

<!DOCTYPE html PUBLIC ="//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-31J" />
<title> TEST </title>
</head>
<body>
<table border="1" cellspacing="0">
<caption>おすすめのスープカレー</caption>
  <tr>
    <th>スープカレー</th><th>評価</th>
  </tr>
  <tr>
    <td>ピカンティ</td><td>無難にうまい</td>
  </tr>
  <tr>
    <td></td><td>初心者にオススメ。野菜が少なめ</td>
  </tr>
</table>
</body>
</html>

・セルを結合するHTMLタグ

<th colspan="セルの数">横方向のセルの結合</th>
<th rowspan="セルの数">縦方向のセルの結合</th>
<td colspan="セルの数">横方向のセルの結合</th>
<td rowspan="セルの数">縦方向のセルの結合</th>

【復習】
CSSをHTMLファイルへ組み込む方法
1.style要素を使ってhead内に指定する。

<head>
<title>CSSをhead内に組み込む</title>
<style type="text/css">
h1 {
	color: #66cc66;
	}
p {
	color: #336666;
	}

</style>
</head>
<body>
<h1>CSS</h1>
<p>hoge</p>
</body>
</html>

2.link要素で外部のCSSファイルをリンクさせる

<link href="style.css" rel="stylesheet" type="text/css" />