当前位置: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.8GHz2GHz2.5GHz
lipengM9454LL/AM9455LL/AM9457LL/A
mapabcDual 1.8GHz PowerPC G5Dual 2GHz PowerPC G5Dual 2.5GHz PowerPC G5
Lennvo900MHz per processor1GHz per processor1.25GHz per processor
Black512K per processor512K per processor512K 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

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

人气教程排行