先看下10种表格
html文件
View Code
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>我的表格</title> 6 </head> 7 <body> 8 <center> 9 <ol> 10 <!--基本表格--> 11 <li>基本表格</li> 12 <table width="200" border="1" bordercolor="black" cellpadding="10" cellspacing="0"> 13 <tr> 14 <td>1.1</td> 15 <td>1.2</td> 16 <td>1.3</td> 17 <tr> 18 <td>2.1</td> 19 <td>2.2</td> 20 <td>2.3</td> 21 </tr> 22 <tr> 23 <td>3.1</td> 24 <td>3.2</td> 25 <td>3.3</td> 26 </tr> 27 </tr> 28 </table> 29 <br /> 30 <!--无边框表格--> 31 <li>无边框表格</li> 32 <table> 33 <tr> 34 <td>1.1</td> 35 <td>1.2</td> 36 <td>1.3</td> 37 <tr> 38 <td>2.1</td> 39 <td>2.2</td> 40 <td>2.3</td> 41 </tr> 42 <tr> 43 <td>3.1</td> 44 <td>3.2</td> 45 <td>3.3</td> 46 </tr> 47 </tr> 48 </table> 49 <br /> 50 <!--双线表格--> 51 <li>双线表格</li> 52 <table width="200" border="1" bordercolor="blue" cellpadding="10"> 53 <tr> 54 <td>1.1</td> 55 <td>1.2</td> 56 <td>1.3</td> 57 </tr> 58 <tr> 59 <td>2.1</td> 60 <td>2.2</td> 61 <td>2.3</td> 62 </tr> 63 <tr> 64 <td>3.1</td> 65 <td>3.2</td> 66 <td>3.3</td> 67 </tr> 68 </table> 69 <br /> 70 <!--合并多列表格--> 71 <li>合并多列表格</li> 72 <table width="200" border="1" bordercolor="blue" cellpadding="10"> 73 <tr> 74 <td colspan="3" align="center">第一行三列已合并</td> 75 </tr> 76 <tr> 77 <td>2.1</td> 78 <td>2.2</td> 79 <td>2.3</td> 80 </tr> 81 <tr> 82 <td>3.1</td> 83 <td>3.2</td> 84 <td>3.3</td> 85 </tr> 86 </table> 87 <br /> 88 <!--合并多行表格--> 89 <li>合并多行表格</li> 90 <table width="200" border="1" bordercolor="blue" cellpadding="10"> 91 <tr> 92 <td rowspan="3" align="center" valign="middle">第一列三行已合并</td> 93 <td>1.2</td> 94 <td>1.3</td> 95 </tr> 96 <tr> 97 <td>2.2</td> 98 <td>2.3</td> 99 </tr> 100 <tr> 101 <td>3.2</td> 102 <td>3.3</td> 103 </tr> 104 </table> 105 <br /> 106 <!--复杂表格1--> 107 <li>复杂表格1</li> 108 <table width="200" border="1" bordercolor="blue" cellpadding="10"> 109 <tr> 110 <td>1.1</td> 111 <td colspan="2" align="center" valign="middle">1.2+1.3</td> 112 </tr> 113 <tr> 114 <td>2.1</td> 115 <td rowspan="2" align="center" valign="middle">2.2+3.2</td> 116 <td>2.3</td> 117 </tr> 118 <tr> 119 <td>3.1</td> 120 <td>3.3</td> 121 </tr> 122 </table> 123 <br /> 124 <!--复杂表格2--> 125 <li>复杂表格2</li> 126 <table width="200" border="1" bordercolor="blue" cellpadding="10"> 127 <tr> 128 <td>1.1</td> 129 <td>1.2</td> 130 <td>1.3</td> 131 </tr> 132 <tr> 133 <td colspan="2" align="center" valign="middle">2.1+2.2</td> 134 <td rowspan="2">2.3+3.3</td> 135 </tr> 136 <tr> 137 <td>3.1</td> 138 <td>3.2</td> 139 </tr> 140 </table> 141 <br /> 142 <!--凸起表格--> 143 <li>凸起表格</li> 144 <table width="200" border="1" cellpadding="10" bgcolor="gray" bordercolorlight="black" bordercolordark="white"> 145 <tr> 146 <td>1.1</td> 147 <td>1.2</td> 148 <td>1.3</td> 149 </tr> 150 <tr> 151 <td>2.1</td> 152 <td>2.2</td> 153 <td>2.3</td> 154 </tr> 155 <tr> 156 <td>3.1</td> 157 <td>3.2</td> 158 <td>3.3</td> 159 </tr> 160 </table> 161 <br /> 162 <!--凹陷表格--> 163 <li>凹陷表格</li> 164 <table width="200" border="1" bgcolor="gray" cellpadding="10" bordercolorlight="white" bordercolordark="black"> 165 <tr> 166 <td>1.1</td> 167 <td>1.2</td> 168 <td>1.3</td> 169 </tr> 170 <tr> 171 <td>2.1</td> 172 <td>2.2</td> 173 <td>2.3</td> 174 </tr> 175 <tr> 176 <td>3.1</td> 177 <td>3.2</td> 178 <td>3.3</td> 179 </tr> 180 </table> 181 <br /> 182 <!--细线表格--> 183 <li>细线表格</li> 184 <table width="200" border="0" cellspacing="1" cellpadding="10" bgcolor="black"> 185 <tr bgcolor="yellow"> 186 <td>1.1</td> 187 <td>1.2</td> 188 <td>1.3</td> 189 </tr> 190 <tr bgcolor="yellow"> 191 <td>2.1</td> 192 <td>2.2</td> 193 <td>2.3</td> 194 </tr> 195 <tr bgcolor="yellow"> 196 <td>3.1</td> 197 <td>3.2</td> 198 <td>3.3</td> 199 </tr> 200 </table> 201 <br /> 202 </ol> 203 </center> 204 </body> 205 </html>
合并单元格，遵循合并n个单元格，删除(n-1)个多余的单元格的原则
凹凸用到bordercolorlight, bordercolordark属性对比来实现的
细线表格将表格背景色设为黑色，(单元格间距)cellspacing="1",border=0,每个tr设置颜色，这样视觉上的对比就会实现细线表格