教你制作好看的网页表格
下面我们来添加css:
css规范有两个表格边框模型:单独的和叠加的.在单独模型中,在各个单元格周围有边框,而在叠加模型中单元格共享边框.大多数浏览器默认采用单独模型,因些首先要做的事就是将表格的border-collapse属性设置为collapse.为了防止表格太宽,需要限制它的宽度;为了帮助定义表格区域,添加边框是个好主意.通过应用少量的?直和水平填充,在表格单元格周围形成一些空白,这也是好想法.
1 2 3 4 5 6 7 8 9 10 | table { border-collapse: collapse; width: 50em; border: 1px solid #666; } th, td { padding: 0.1em 1em; } |
css的border-spacing属性可以控制单元格之间的距离.不幸的是,windows上的IE6和更低版本不理解这个属性(别怀疑这件事,因为大多数人不懂得升级)因此很少使用它.为了去掉单元格之间的默认填充,不得不使用老式但可靠的cellspacing属性.严格地说,这个属性在本质上是表现性的.但是,它仍然是有效的html,而且是当前在IE6中控制单元间距的惟一方法.
1 2 | <table cellspacing="0" id="playlistTable" summary="夕木木音乐排行榜,每周一次,给你最好听音乐享受."> |
完整的css代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | table { border-collapse: collapse; width: 50em; border: 1px solid #666; } caption { font-size: 1.2em; font-weight: bold; margin: 1em 0; } col { border-right: 1px solid #ccc; } col#albumCol { border: none; } thead { background: #ccc url(images/bar.gif) repeat-x left center; border-top: 1px solid #a5a5a5; border-bottom: 1px solid #a5a5a5; } th { font-weight: normal; text-align: left; } #playlistPosHead { text-indent: -1000em; } th, td { padding: 0.1em 0.5em; } .odd { background-color:#edf5ff; } tr:hover { background-color:#3d80df; color: #fff; } thead tr:hover { background-color: transparent; color: inherit; } |
刚学css的时候认为<table>标签没有用,其实那时候的想法是错的,<table>不用布局,现回到它原来的功能,–显示数据.
欢迎留言