CSSテーブル
CSS テーブルとフォームは、Web ページで最も一般的な要素であり、データを表示するだけでなく、レイアウトにもよく使用されます。
色の付いた表の境界線
次の例では、表の Th、TD 要素、および th 要素のテキストと背景色の境界線を指定します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style type="text/css">
table.gridtable {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;
}
table.gridtable th {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #dedede;
}
table.gridtable td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #ffffff;
}
</style>
</head>
<body>
<!-- Table goes in the document BODY -->
<table class="gridtable">
<tr>
<th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
</tr>
<tr>
<td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
</tr>
<tr>
<td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
</tr>
</table>
</body>
</html>表の単一の境界線を表示するには、 border-collapse 属性を使用します。
2 テーブルの幅と高さ
width 属性と height 属性は、テーブルの幅と高さを定義します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
table,td,th
{
border:1px solid black;
}
table
{
width:50%;
}
th
{
height:50px;
}
</style>
</head>
<body>
<table>
<tr>
<th>汽车品牌</th>
<th>产地</th>
</tr>
<tr>
<td>马自达</td>
<td>日本</td>
</tr>
<tr>
<td>菲亚特</td>
<td>意大利</td>
</tr>
<tr>
<td>林肯</td>
<td>美国</td>
</tr>
</table>
</body>三 表のテキストの配置
text-align プロパティは、左、右、中央などの水平方向の配置を設定します
vertical-align プロパティは、上、下、中央などの垂直方向の配置を設定します
りー
新しいファイル
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
table.imagetable {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #999999;
border-collapse: collapse;
}
table.imagetable th {
background-color: #f0ffff;
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #999999;
}
table.imagetable td {
background-color: #f0fff0;
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #999999;
}
</style>
</head>
<body>
<table class="imagetable">
<tr>
<th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
</tr>
<tr>
<td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
</tr>
<tr>
<td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
</tr>
</table>
</body>
</html>
プレビュー
Clear
- おすすめコース
- コースウェアのダウンロード
現時点ではコースウェアはダウンロードできません。現在スタッフが整理中です。今後もこのコースにもっと注目してください〜
このコースを視聴した生徒はこちらも学んでいます
