ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSを使って美しい表を作成するにはどうすればよいですか? 【例】
CSSを使って美しい表を作成するにはどうすればよいですか? 【例】
- 藏色散人オリジナル
- 2018-09-05 14:57:277462ブラウズ
この記事では、css を使用して美しく簡潔な HTML テーブルを作成する方法を詳しく紹介します。誰もが HTML 関連の知識に触れると、多かれ少なかれ自分で小さなコードを書いて、小さな効果を生み出すことになると思います。たとえば、さまざまな Web サイトを閲覧すると、常にさまざまなテーブル表示が表示されますが、その中にはまったくスタイルのない従来のテーブルもあります。表示形式に特徴のあるものもあります。
初心者にとっては、CSS にまったく触れずにテーブルを作成することもできますが、そのようなテーブルは退屈で退屈です。それでは、CSS スタイルで作成された非常に美しく簡潔な表を共有しましょう。
div+css 見栄えの良いテーブルを作成するための具体的なコード例は次のとおりです:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用css制作的一款好看表格样式示例</title>
<style>
#t1
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
width:100%;
border-collapse:collapse;
}
#t1 td, #t1 th
{
font-size:1em;
border:1px solid #1094f2;
padding:3px 7px 2px 7px;
}
#t1 th
{
font-size:1.1em;
text-align:left;
padding-top:5px;
padding-bottom:4px;
background-color: #029789;
color:#ffffff;
}
#t1 tr.alt td
{
color:#000000;
background-color: #94ef9a;
}
</style>
</head>
<body>
<table id="t1">
<tr>
<th>姓名</th>
<th>性别</th>
<th>爱好</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>唱歌</td>
</tr>
<tr class="alt">
<td>李四</td>
<td>女</td>
<td>跳舞</td>
</tr>
<tr>
<td>王二</td>
<td>男</td>
<td>看书</td>
</tr>
<tr class="alt">
<td>赵五</td>
<td>男</td>
<td>爬山</td>
</tr>
</table>
</body>
</html> 上記のコードにブラウザからアクセスすると、その効果は次のようになります:
に示すように退屈な白黒の線表に比べて、写真のほうがずっと良く見えませんか？ 1行おきに異なる色の背景が表示され、表の境界線が細い線で表示されます。ユーザーはフォーム内の情報をより直感的に確認できるようになります。このような効果を実現するには、強力な CSS スタイル属性が必要です。
ここでは、スタイルに次のようないくつかの重要な属性を見つけることができます:
border-collapse:collapse; この属性は、テーブルの境界線を 1 つの境界線にマージできることを示します。
background-colorは背景色を設定します。
上記の紹介を通じて、CSS を使用してテーブルを作成する方法について詳しく理解できましたか?このようにして、独自の美的好みに応じて、さまざまな効果を持つ CSS テーブル スタイルを設定できます。見栄えの良いテーブルはユーザーに気に入られるだけでなく、管理がより直感的で便利になります。
この記事は一定の参考価値があるので、困っている友達に役立つことを願っています!
以上がCSSを使って美しい表を作成するにはどうすればよいですか? 【例】の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。