表格标记 ,行标记 ,单元格标记
基本语法：
单元格内文字 单元格内文字 ...... 单元格内文字 单元格内文字 ...... ......
示例代码：
1 2 3 4 5 第9章 6 7 8 body { 9 font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 10 color: #4f6b72; 11 background: #E6EAE9; 12 } 13 14 a { 15 color: #c75f3e; 16 } 17 18 #mytable { 19 width: 700px; 20 padding: 0; 21 margin: 0; 22 } 23 24 caption { 25 padding: 0 0 5px 0; 26 width: 700px; 27 font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 28 text-align: right; 29 } 30 31 th { 32 font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 33 color: #4f6b72; 34 border-right: 1px solid #C1DAD7; 35 border-bottom: 1px solid #C1DAD7; 36 border-top: 1px solid #C1DAD7; 37 letter-spacing: 2px; 38 text-transform: uppercase; 39 text-align: left; 40 padding: 6px 6px 6px 12px; 41 background: #CAE8EA url(images/bg_header.jpg) no-repeat; 42 } 43 44 th.nobg { 45 border-top: 0; 46 border-left: 0; 47 border-right: 1px solid #C1DAD7; 48 background: none; 49 } 50 51 td { 52 border-right: 1px solid #C1DAD7; 53 border-bottom: 1px solid #C1DAD7; 54 background: #fff; 55 font-size: 11px; 56 padding: 6px 6px 6px 12px; 57 color: #4f6b72; 58 } 59 60 td.alt { 61 background: #F5FAFA; 62 color: #797268; 63 } 64 65 th.spec { 66 border-left: 1px solid #C1DAD7; 67 border-top: 0; 68 background: #fff url(images/bullet1.gif) no-repeat; 69 font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 70 } 71 72 th.specalt { 73 border-left: 1px solid #C1DAD7; 74 border-top: 0; 75 background: #f5fafa url(images/bullet2.gif) no-repeat; 76 font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 77 color: #797268; 78 } 79 80 81 82 The technical specifications of the Apple PowerMac G5 series 83 84 设置 85 1.8GHz 86 2GHz 87 2.5GHz 88 89 90 lipeng 91 M9454LL/A 92 M9455LL/A 93 M9457LL/A 94 95 96 mapabc 97 Dual 1.8GHz PowerPC G5 98 Dual 2GHz PowerPC G5 99 Dual 2.5GHz PowerPC G5 100 101 102 Lennvo 103 900MHz per processor 104 1GHz per processor 105 1.25GHz per processor 106 107 108 Black 109 512K per processor 110 512K per processor 111 512K per processor 112 113 114 115
二、让表格没有凹凸感
没有样式的情况下，表格边框是凹凸的，可以使用cellspacing和cellpadding来取消凹凸感。cellspacing是td与td之间的距离，而cellpadding是单元格内部内容与单元格边界之间的空白距离的大小。
例如：
1 2 3 单元格内的标题 4 单元格内的标题 5 6 7 单元格内的文字 8 单元格内的文字 9 10 11 单元格内的文字 12 单元格内的文字 13 14
三、添加表头th
1 2 3 4 5 6 7 8 9 第9章 10 11 12 13 14 序号 15 歌曲名 16 演唱 17 18 19 01 20 小苹果 21 筷子兄弟 22 23 24 02 25 匆匆那年 26 王菲 27 28 29 03 30 喜欢你 31 G.E.M.邓紫棋 32 33 34 04 35 当你老了 36 莫文蔚 37 38 39 40 41
为了更进一步区分表头与内容，对表格进行样式设计，顺便添加 , , 标签为表格完善结构，更进一步区别不同部分：
1 2 3 4 5 6 7 8 9 第9章 10 11 th {12 font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;13 color: #4f6b72;14 border-right: 1px solid #C1DAD7;15 border-bottom: 1px solid #C1DAD7;16 border-top: 1px solid #C1DAD7;17 letter-spacing: 2px;18 text-transform: uppercase;19 text-align: left;20 padding: 6px 6px 6px 12px;21 background: #CAE8EA url(images/bg_header.jpg) no-repeat;22 }23 24 td {25 border-right: 1px solid #C1DAD7;26 border-bottom: 1px solid #C1DAD7;27 background: #fff;28 font-size: 11px;29 padding: 6px 6px 6px 12px;30 color: #4f6b72;31 }32 thead th {33 color: red;34 }35 tfoot th {36 color: blue;37 }38 39 40 41 42 43 44 序号 45 歌曲名 46 演唱 47 48 49 50 51 01 52 小苹果 53 筷子兄弟 54 55 56 02 57 匆匆那年 58 王菲 59 60 61 03 62 喜欢你 63 G.E.M.邓紫棋 64 65 66 04 67 当你老了 68 莫文蔚 69 70 71 72 73 序号 74 歌曲名 75 演唱 76 77 78 79 80 81
四、不规则表格
colspan 属性规定单元格可横跨的列数。rowspan 属性规定单元格可横跨的行数。
1 2 3 4 5 6 7 8 9 第9章 10 11 th {12 font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;13 color: #4f6b72;14 border-right: 1px solid #C1DAD7;15 border-bottom: 1px solid #C1DAD7;16 border-top: 1px solid #C1DAD7;17 letter-spacing: 2px;18 text-transform: uppercase;19 text-align: left;20 padding: 6px 6px 6px 12px;21 background: #CAE8EA url(images/bg_header.jpg) no-repeat;22 }23 24 td {25 border-right: 1px solid #C1DAD7;26 border-bottom: 1px solid #C1DAD7;27 background: #fff;28 font-size: 11px;29 padding: 6px 6px 6px 12px;30 color: #4f6b72;31 }32 33 34 35 36 37 38 序号 39 歌曲名 40 演唱 41 42 43 44 45 01 46 小苹果 47 筷子兄弟 48 49 50 02 51 匆匆那年 52 王菲 53 54 55 03 56 致青春 57 58 59 04 60 喜欢你 61 G.E.M.邓紫棋 62 63 64 05 65 当你老了 66 莫文蔚 67 68 69 06 70 群星演唱最炫小苹果 71 72 73 74 75 76
五、几种常见表格设计
1、圆角表格
1 2 3 4 5 6 7 8 9 第9章 10 11 12 13 14 15 body { 16 width: 600px; 17 margin: 40px auto; 18 font-family: 'trebuchet MS', 'Lucida sans', Arial; 19 font-size: 14px; 20 color: #444; 21 } 22 23 table { 24 *border-collapse: collapse; /* IE7 and lower */ 25 border-spacing: 0; 26 width: 100%; 27 } 28 29 .bordered { 30 border: solid #ccc 1px; 31 -moz-border-radius: 6px; 32 -webkit-border-radius: 6px; 33 border-radius: 6px; 34 -webkit-box-shadow: 0 1px 1px #ccc; 35 -moz-box-shadow: 0 1px 1px #ccc; 36 box-shadow: 0 1px 1px #ccc; 37 } 38 39 .bordered tr:hover { 40 background: #fbf8e9; 41 -o-transition: all 0.1s ease-in-out; 42 -webkit-transition: all 0.1s ease-in-out; 43 -moz-transition: all 0.1s ease-in-out; 44 -ms-transition: all 0.1s ease-in-out; 45 transition: all 0.1s ease-in-out; 46 } 47 48 .bordered td, .bordered th { 49 border-left: 1px solid #ccc; 50 border-top: 1px solid #ccc; 51 padding: 10px; 52 text-align: left; 53 } 54 55 .bordered th { 56 background-color: #dce9f9; 57 background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9)); 58 background-image: -webkit-linear-gradient(top, #ebf3fc, #dce9f9); 59 background-image: -moz-linear-gradient(top, #ebf3fc, #dce9f9); 60 background-image: -ms-linear-gradient(top, #ebf3fc, #dce9f9); 61 background-image: -o-linear-gradient(top, #ebf3fc, #dce9f9); 62 background-image: linear-gradient(top, #ebf3fc, #dce9f9); 63 -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset; 64 -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset; 65 box-shadow: 0 1px 0 rgba(255,255,255,.8) inset; 66 border-top: none; 67 text-shadow: 0 1px 0 rgba(255,255,255,.5); 68 } 69 70 .bordered td:first-child, .bordered th:first-child { 71 border-left: none; 72 } 73 74 .bordered th:first-child { 75 -moz-border-radius: 6px 0 0 0; 76 -webkit-border-radius: 6px 0 0 0; 77 border-radius: 6px 0 0 0; 78 } 79 80 .bordered th:last-child { 81 -moz-border-radius: 0 6px 0 0; 82 -webkit-border-radius: 0 6px 0 0; 83 border-radius: 0 6px 0 0; 84 } 85 86 .bordered th:only-child{ 87 -moz-border-radius: 6px 6px 0 0; 88 -webkit-border-radius: 6px 6px 0 0; 89 border-radius: 6px 6px 0 0; 90 } 91 92 .bordered tr:last-child td:first-child { 93 -moz-border-radius: 0 0 0 6px; 94 -webkit-border-radius: 0 0 0 6px; 95 border-radius: 0 0 0 6px; 96 } 97 98 .bordered tr:last-child td:last-child { 99 -moz-border-radius: 0 0 6px 0;100 -webkit-border-radius: 0 0 6px 0;101 border-radius: 0 0 6px 0;102 }103 104 105 106 金曲排行 107 108 109 序号 110 歌曲名 111 演唱 112 人气 113 114 115 116 117 01 118 小苹果 119 筷子兄弟 120 120093 121 122 123 02 124 匆匆那年 125 王菲 126 38490 127 128 129 03 130 致青春 131 132 133 04 134 喜欢你 135 G.E.M.邓紫棋 136 37449 137 138 139 05 140 当你老了 141 莫文蔚 142 93947 143 144 145 06 146 群星演唱最炫小苹果 147 93984 148 149 150 151 152 153 2、条纹表格
1 2 3 4 5 6 7 8 9 第9章 10 11 12 13 14 body { 15 width: 600px; 16 margin: 40px auto; 17 font-family: 'trebuchet MS', 'Lucida sans', Arial; 18 font-size: 14px; 19 color: #444; 20 } 21 22 table { 23 *border-collapse: collapse; /* IE7 and lower */ 24 border-spacing: 0; 25 width: 100%; 26 } 27 28 .zebra td, .zebra th { 29 padding: 10px; 30 border-bottom: 1px solid #f2f2f2; 31 } 32 33 .zebra tbody tr:nth-child(even) { 34 background: #f5f5f5; 35 -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset; 36 -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset; 37 box-shadow: 0 1px 0 rgba(255,255,255,.8) inset; 38 } 39 40 .zebra th { 41 text-align: left; 42 text-shadow: 0 1px 0 rgba(255,255,255,.5); 43 border-bottom: 1px solid #ccc; 44 background-color: #eee; 45 background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#eee)); 46 background-image: -webkit-linear-gradient(top, #f5f5f5, #eee); 47 background-image: -moz-linear-gradient(top, #f5f5f5, #eee); 48 background-image: -ms-linear-gradient(top, #f5f5f5, #eee); 49 background-image: -o-linear-gradient(top, #f5f5f5, #eee); 50 background-image: linear-gradient(top, #f5f5f5, #eee); 51 } 52 53 .zebra th:first-child { 54 -moz-border-radius: 6px 0 0 0; 55 -webkit-border-radius: 6px 0 0 0; 56 border-radius: 6px 0 0 0; 57 } 58 59 .zebra th:last-child { 60 -moz-border-radius: 0 6px 0 0; 61 -webkit-border-radius: 0 6px 0 0; 62 border-radius: 0 6px 0 0; 63 } 64 65 .zebra th:only-child{ 66 -moz-border-radius: 6px 6px 0 0; 67 -webkit-border-radius: 6px 6px 0 0; 68 border-radius: 6px 6px 0 0; 69 } 70 71 .zebra tfoot td { 72 border-bottom: 0; 73 border-top: 1px solid #fff; 74 background-color: #f1f1f1; 75 } 76 77 .zebra tfoot td:first-child { 78 -moz-border-radius: 0 0 0 6px; 79 -webkit-border-radius: 0 0 0 6px; 80 border-radius: 0 0 0 6px; 81 } 82 83 .zebra tfoot td:last-child { 84 -moz-border-radius: 0 0 6px 0; 85 -webkit-border-radius: 0 0 6px 0; 86 border-radius: 0 0 6px 0; 87 } 88 89 .zebra tfoot td:only-child{ 90 -moz-border-radius: 0 0 6px 6px; 91 -webkit-border-radius: 0 0 6px 6px 92 border-radius: 0 0 6px 6px 93 } 94 95 96 97 98 金曲排行 99 100 101 序号 102 歌曲名 103 演唱 104 人气 105 106 107 108 109 110 111 112 113 114 115 116 117 01 118 小苹果 119 筷子兄弟 120 1200903 121 122 123 02 124 匆匆那年 125 王菲 126 138490 127 128 129 03 130 致青春 131 王菲 132 138489 133 134 135 04 136 喜欢你 137 G.E.M.邓紫棋 138 137449 139 140 141 05 142 当你老了 143 莫文蔚 144 93947 145 146 147 06 148 群星演唱最炫小苹果 149 93984 150 151 152 153 154 155
查看更多关于HTML系列（八）：表格_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did111259