HTML系列（八）：表格_html/css_WEB-ITnose

程序员文章站 2022-05-15 21:29:49

...

一、基本表格：

表格标记

,行标记,单元格标记,

,标签为表格完善结构，更进一步区别不同部分：

 1  2  3  4      5      6      7      8      9     第9章10 39     40 41

基本语法：

...... ...... ......

单元格内文字	单元格内文字
单元格内文字	单元格内文字

示例代码：

 1    2    3    4    5 第9章   6  7    80    81

82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113

The technical specifications of the Apple PowerMac G5 series
设置	1.8GHz	2GHz	2.5GHz
lipeng	M9454LL/A	M9455LL/A	M9457LL/A
mapabc	Dual 1.8GHz PowerPC G5	Dual 2GHz PowerPC G5	Dual 2.5GHz PowerPC G5
Lennvo	900MHz per processor	1GHz per processor	1.25GHz per processor
Black	512K per processor	512K per processor	512K per processor

114 115

二、让表格没有凹凸感

没有样式的情况下，表格边框是凹凸的，可以使用cellspacing和cellpadding来取消凹凸感。cellspacing是td与td之间的距离，而cellpadding是单元格内部内容与单元格边界之间的空白距离的大小。

例如：

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 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

序号	歌曲名	演唱
01	小苹果	筷子兄弟
02	匆匆那年	王菲
03	喜欢你	G.E.M.邓紫棋
04	当你老了	莫文蔚

39 40 41

为了更进一步区分表头与内容，对表格进行样式设计，顺便添加

42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78

序号	歌曲名	演唱
01	小苹果	筷子兄弟
02	匆匆那年	王菲
03	喜欢你	G.E.M.邓紫棋
04	当你老了	莫文蔚
序号	歌曲名	演唱

79 80 81

四、不规则表格

colspan 属性规定单元格可横跨的列数。rowspan 属性规定单元格可横跨的行数。

 1  2  3  4      5      6      7      8      9     第9章10 33     34 35

36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73

序号	歌曲名	演唱
01	小苹果	筷子兄弟
02	匆匆那年	王菲
03	致青春	王菲
04	喜欢你	G.E.M.邓紫棋
05	当你老了	莫文蔚
06	群星演唱最炫小苹果

74 75 76

五、几种常见表格设计

1、圆角表格

 1  2  3  4      5      6      7      8      9     第9章 10  11      12  13 105

106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150

金曲排行
序号	歌曲名	演唱	人气
01	小苹果	筷子兄弟	120093
02	匆匆那年	王菲	38490
03	致青春	王菲	38490
04	喜欢你	G.E.M.邓紫棋	37449
05	当你老了	莫文蔚	93947
06	群星演唱最炫小苹果		93984

151 152 153

2、条纹表格

 1  2  3  4      5      6      7      8      9     第9章 10  11      12  13  97

98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152

金曲排行
序号	歌曲名	演唱	人气

01	小苹果	筷子兄弟	1200903
02	匆匆那年	王菲	138490
03	致青春	王菲	138489
04	喜欢你	G.E.M.邓紫棋	137449
05	当你老了	莫文蔚	93947
06	群星演唱最炫小苹果		93984