使用HTML和CSS创建一个表格，方便调用 |
您所在的位置：网站首页 › html表格制作代码大全 › 使用HTML和CSS创建一个表格，方便调用 |
使用HTML和CSS创建一个表格，方便调用
|
table.mt {
width: 1000px;
border-spacing: 0px;
border-right:1px solid #aaa;
border-bottom:1px solid #aaa;
}
table.mt td {
border-left:1px solid #aaa;
border-top:1px solid #aaa;
padding:10px;
}
table.mt thead tr {
background: #339;
color: #fff;
}
table.mt tbody tr:nth-child(even) {
background: #eee;
}
table.mt tbody tr:hover {
background: #ccc;
color: #fff;
}
然后就是table_1.css的代码。 先把border-spacing设置为0； 然后设置整个table.mt的右和下边框，再设置所有td的左和上边框，这样刚好设置了整张表格的边框线 这是一个大标题 标题 标题 标题 标题 标题 table内容 table内容 table内容 table内容 table内容 table内容 table内容 table内容 table内容 table内容 table内容 table内容 table内容 table内容 table内容 table内容 table内容 table内容 table内容 table内容 table内容 table内容 table内容 table内容 table内容 table内容 table内容 table内容 table内容 table内容 table内容 table内容 table内容 table内容 table内容第二张表格也没有用th标签 * { padding: 0px; margin: 0px; font-family: 微软雅黑; } #box { border:1px solid #bbb; margin: 50px auto; width: 620px; } #box_p { width: 400px; position: relative; left: 50%; margin-left: -200px; } #box_p p { text-align: center; padding: 10px 0px 0px 0px; font-size: 25px; font-weight: bold; color: #999; } table.mt { width: 580px; margin: 15px 20px 20px 20px; border-top: 1px solid #EFD3D2; border-spacing: 0px; color: #B06A68; } table.mt thead tr td,table.mt tbody tr td { border-bottom: 1px solid #EFD3D2; padding: 10px 20px; } table.mt thead tr td { font-weight: bold; } table.mt tbody tr:nth-child(even) { background: #EFD3D2; }把整张表格放进了一个盒子中 设置了一个#box_p的盒子居中 第三章表格用了caption标签来写一个大标题 * { padding: 0px; margin: 0px; font-family: 微软雅黑; } #box { border:1px solid #bbb; margin: 50px auto; width: 340px; background: #fff; } table.mt caption{ font-size: 20px; font-weight: bold; } #box_p { width: 400px; position: relative; left: 50%; margin-left: -200px; } #box_p p { text-align: center; padding: 10px 0px 0px 0px; font-size: 25px; font-weight: bold; color: #999; } table.mt { width: 300px; margin: 15px 20px 20px 20px; border-top: 1px solid #EFD3D2; border-spacing: 0px; color: #B06A68; } table.mt thead tr td,table.mt tbody tr td { border-bottom: 1px solid #EFD3D2; padding: 10px 20px; text-align: center; } table.mt thead tr td { font-weight: bold; } table.mt tbody tr:nth-child(even) { background: #eee; } table.mt tbody tr td:hover { background: #DFD8E8; }第三张表格的css。 为tbody里面的tr写了hover效果 总结： 最重要的：格式一定要规范！用table.mt来框住thead和tbody还可以有tfoot, 这样的话只要创建一个table，设置class为mt，就可以随意调用上面任何一个table.css的样式。 |
【本文地址】
今日新闻 |
推荐新闻 |