符合WEB标准的CSS细线表格样式
相关主题
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
在使用表格表现网页的数据时,我们往往希望表格的边框向Word里那样优雅地表现出细线。
但是事实却是,网页设计出来的表格又粗俗又难看,粗大的边框和间距让人立刻产生出给其瘦身的冲动。
对于很有审美感的设计师来说,这种丑陋的表格是不堪忍受的,如果不能解决,那么设计师将彻夜难眠。
还好,我们有了质量上乘的化妆产品——CSS,俗称“样式表”,大名“层叠样式表”,曾用名“级联样式表”,英文名“Cascading Style Sheet”。其作用是控制HTML页面的布局和外观样式,使Web文档内容结构和表现形式分离。
代码如下:
table {
border:1px solid #000;
border-width:1px 0 0 1px;
margin:2px 0 2px 0;
text-align:center;
border-collapse:collapse;
}
td,th {
padding:3px;
font-size:12px;
border:1px solid #000;
border-width:0 1px 1px 0;
margin:2px 0 2px 0;
text-align:left;
}
th {
text-align:center;
font-weight:600;
background-color:#F4F4F4;
}
姓名 | 年龄 | 性别 | 专业 | 年级 | 系别 |
---|---|---|---|---|---|
郑春磊 | 20 | 男 | 软件工程 | 大一 | 计算机系 |
李肃文 | 21 | 男 | 软件工程 | 大一 | 计算机系 |
效果如图: