HTML table CSS

本文介绍了一个使用CSS进行表格样式的具体实例。通过定义类名为'def'的<tr>元素及内部<th>和<td>元素的样式,实现了表格边框的统一风格。每个单元格都拥有灰色实线边框,并且对顶部和底部填充进行了设定。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>TABLE CSS</title>
<style type="text/css">
<!--
table {
border:1px solid #A9B3CD;
border-collapse:collapse;
}
tr.def {
padding-top: 2px;
padding-bottom: 2px;
}
tr.def td{

border: solid #A9B3CD; /* 设置边框属性;样式(solid=实线)、颜色(#999=灰) */
border-width: 1px 1px 1px 1px; /* 设置边框状粗细:上 右 下 左 = 对应:1px 0 0 1px */

}
tr.def th{

border: solid #A9B3CD; /* 设置边框属性;样式(solid=实线)、颜色(#999=灰) */
border-width: 1px 1px 1px 1px; /* 设置边框状粗细:上 右 下 左 = 对应:1px 0 0 1px */

}

--!>
</style>
</head>

<body>

<table width="600">

<tr class="def">
<th>A</th>
<th>ABCD</th>
<th>ABCD</th>
<th>ABCD</th>
<th>ABCD</th>
</tr>
<tr class="def">
<td align="right">ABCD</td>
<td>ABCD</td>
<td>ABCD</td>
<td>ABCD</td>
<td>ABCD</td>
</tr>
<tr class="def">
<td>ABCD</td>
<td>ABCD</td>
<td>ABCD</td>
<td>ABCD</td>
<td>ABCD</td>
</tr>
<tr class="def">
<td>ABCD</td>
<td>ABCD</td>
<td>ABCD</td>
<td>ABCD</td>
<td>ABCD</td>
</tr>
<tr class="def">
<td>ABCD</td>
<td>ABCD</td>
<td>ABCD</td>
<td>ABCD</td>
<td>ABCD</td>
</tr>
</table>

</body>

</html>
### 关于HTML表格(CSS Table)的样式设置 #### 基本属性应用实例 对于`<table>`标签而言,可以利用多种CSS属性实现不同的视觉效果。例如,通过定义边框、背景颜色以及文字对齐方式等基础样式来增强表格的表现力[^1]。 ```css /* 定义整个表格的基础样式 */ table { border-collapse: collapse; /* 边框合并 */ width: 100%; /* 表格宽度 */ } th, td { text-align: left; /* 文字左对齐 */ padding: 8px; /* 单元格内填充 */ } ``` #### 进阶布局技巧 当希望进一步优化表格结构时,则可以通过指定特定的选择器(如`.classname`或`#idname`),针对不同部分单独定制样式[^2]: ```css /* 使用类名选择器自定义表头样式 */ thead th { background-color: #f2f2f2; color: black; } /* 针对奇数行添加交替底色 */ tr:nth-child(odd) { background-color: #dddddd; } ``` #### 特殊情况处理 有时为了适应更复杂的需求,还可以引入额外的功能性CSS属性,比如让表格具有响应式设计的能力,在移动设备上也能良好显示[^3]。 ```css @media screen and (max-width: 600px){ table, thead, tbody, th, td, tr { display: block; } /* 调整单元格展示形式以便阅读 */ td::before{ content: attr(data-label); /* 显示列标题作为前缀 */ float: left; font-weight: bold; } } ``` 上述代码片段展示了如何运用CSS美化并功能化HTML中的表格元素,不仅限于此处列举的内容,实际开发过程中可根据具体场景灵活组合各种样式规则达成理想的效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值