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 プロパティは、上、下、中央などの垂直方向の配置を設定します
りー