html table专业样式,html 简单的table样式

1

2

3

4

5

html 简单的table样式

6

7 /*gridtable*/

8 table.gridtable{

9 font-family:verdana,arial,sans-serif;

10 font-size:11px;

11 color:#333333;

12 border-width:1px;

13 border-color:#666666;

14 border-collapse:collapse;

15 }

16 table.gridtable th{

17 border-width:1px;

18 padding:8px;

19 border-style:solid;

20 border-color:#666666;

21 background-color:#dedede;

22 }

23 table.gridtable td{

24 border-width:1px;

25 padding:8px;

26 border-style:solid;

27 border-color:#666666;

28 background-color:#ffffff;

29 }

30 /*/gridtable*/

31

32 /*imagetable*/

33 table.imagetable{

34 font-family:verdana,arial,sans-serif;

35 font-size:11px;

36 color:#333333;

37 border-width:1px;

38 border-color:#999999;

39 border-collapse:collapse;

40 }

41 table.imagetable th{

42 background:#b5cfd2 url(‘cell-blue.jpg‘);

43 border-width:1px;

44 padding:8px;

45 border-style:solid;

46 border-color:#999999;

47 }

48 table.imagetable td{

49 background:#dcddc0 url(‘cell-grey.jpg‘);

50 border-width:1px;

51 padding:8px;

52 border-style:solid;

53 border-color:#999999;

54 }

55 /*/imagetable*/

56 /*altrowstable*/

57

58 table.altrowstable{

59 font-family:verdana,arial,sans-serif;

60 font-size:11px;

61 color:#333333;

62 border-width:1px;

63 border-color:#a9c6c9;

64 border-collapse:collapse;

65 }

66 table.altrowstable th{

67 border-width:1px;

68 padding:8px;

69 border-style:solid;

70 border-color:#a9c6c9;

71 }

72 table.altrowstable td{

73 border-width:1px;

74 padding:8px;

75 border-style:solid;

76 border-color:#a9c6c9;

77 }

78 .oddrowcolor{

79 background-color:#d4e3e5;

80 }

81 .evenrowcolor{

82 background-color:#c3dde0;

83 }

84 /*/altrowstable*/

85

86 /*hovertable*/

87 table.hovertable{

88 font-family:verdana,arial,sans-serif;

89 font-size:11px;

90 color:#333333;

91 border-width:1px;

92 border-color:#999999;

93 border-collapse:collapse;

94 }

95 table.hovertable th{

96 background-color:#c3dde0;

97 border-width:1px;

98 padding:8px;

99 border-style:solid;

100 border-color:#a9c6c9;

101 }

102 table.hovertable tr{

103 background-color:#d4e3e5;

104 }

105 table.hovertable td{

106 border-width:1px;

107 padding:8px;

108 border-style:solid;

109 border-color:#a9c6c9;

110 }

111 /*/hovertable*/

112

113

114

115

116

117

table样式1:单像素边框CSS表格

118

119

120

Info Header 1

121

Info Header 2

122

Info Header 3

123

124

125

Text 1AText 1BText 1C

126

127

128

Text 2AText 2BText 2C

129

130

131

132

table样式2:带背景图的CSS样式表格

133

134

135

Info Header 1

136

Info Header 2

137

Info Header 3

138

139

140

Text 1AText 1BText 1C

141

142

143

Text 2AText 2BText 2C

144

145

146

147

table样式3:自动换整行颜色的CSS样式表格(需要用到JS)

148

149

150

Info Header 1Info Header 2Info Header 3

151

152

153

Text 1AText 1BText 1C

154

155

156

Text 2AText 2BText 2C

157

158

159

160

Text 3AText 3BText 3C

161

162

163

Text 4AText 4BText 4C

164

165

166

Text 5AText 5BText 5C

167

168

169

170

171

table样式4:鼠标悬停高亮的CSS样式表格 (需要JS)

172

173

174

Info Header 1Info Header 2Info Header 3

175

176

177

Item 1AItem 1BItem 1C

178

179

180

Item 2AItem 2BItem 2C

181

182

183

Item 3AItem 3BItem 3C

184

185

186

Item 4AItem 4BItem 4C

187

188

189

Item 5AItem 5BItem 5C

190

191

192

193

194 functionaltRows(id){195 if(document.getElementsByTagName){196

197 vartable=document.getElementById(id);198 varrows=table.getElementsByTagName(“tr”);199

200 for(i= 0; i

210 window.οnlοad=function(){211 altRows(‘alternatecolor‘);212 }213

214

215