html之table(10种表格)

先看下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设置颜色，这样视觉上的对比就会实现细线表格

posted @ 2013-04-09 15:41  dreamfly_cc  阅读(629)  评论(0)  编辑  收藏  举报