当前位置：Gxlcms > html代码 > HTML系列（八）：表格_html/css_WEB-ITnose

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

时间：2021-07-01 10:21:17 帮助过：6人阅读

一、基本表格：

表格标记

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

 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是单元格内部内容与单元格边界之间的空白距离的大小。

例如：

 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         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 致青春
04 喜欢你 G.E.M.邓紫棋 37449
05 当你老了 莫文蔚 93947
06 群星演唱最炫小苹果 93984
151 152 153

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

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
153 154 155

序号	歌曲名	演唱	人气

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

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

人气教程排行