CSSテーブルLOGIN

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>
コースウェア