<style type="text/css">table.imagetable {font-family: verdana,arial,sans-serif font-size:11px color:#333333 border-width: 1px border-color: #999999 border-collapse: collapse
}table.imagetable th {background:#b5cfd2 url('cell-blue.jpg') border-width: 1px padding: 8px border-style: solid border-color: #999999
}table.imagetable td {background:#dcddc0 url('cell-grey.jpg') border-width: 1px padding: 8px border-style: solid border-color: #999999
}
</style>
指定的<table>为细边框，把<table>放在<div>中即可。
一、首先新建表格，代码如下：
<table width="500" border="1"> <tr><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td></tr><tr> <td> </td><td> </td><td> </td></tr</table>。
二、在table里加css样式，代码如下：
<table width="500" border="1" cellpadding="0" cellspacing="0" style="border-collapse:collapse"> <tr><td> </td><td> </td><td> </td </tr><tr><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td></table>。
三、单元格边距(表格填充)(cellpadding) -- 代表单元格外面的一个距离,用于隔开单元格与单元格空间。单元格间距(表格间距)(cellspacing) -- 代表表格边框与单元格补白的距离,也是单元格补白之间的距离，border-collapse:collapse表示表格的两边框合并为一条即可。
简单表格.html 文件代码清单如下：
<!doctype html><html lang="zh">
<head>
<meta charset="utf-8" />
<title>简单表格</title>
<link rel="stylesheet" href="table.css" />
</head>
<body>
<table>
<caption>
create your own bingo card
</caption>
<tr>
<th>b</th>
<th>i</th>
<th>n</th>
<th>g</th>
<th>o</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
<tr>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
</tr>
</table>
</body>
</html>
table.css 文件代码清单如下：
table {border: none
border-collapse: collapse
}
table caption {
font-size: 1.2em
font-weight: bold
}
table th {
border: 1px solid red
width: 100px
height: 100px
}
table td {
border: 1px solid #000
width: 100px
height: 100px
}
