目录
初始表格
边距、居中、边框
单元格边距cellspacing
边距折叠(两个叠加不会变粗)border-collapse:collapse;
单元格边距border-spacing
初始表格
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>奖牌榜</title></head><body><table border="2" cellpadding="2" cellspacing="2" bgcolor="#eeeeee"><caption>期中考试成绩单</caption><tr><th>姓名</th> <th>物理</th> <th>化学</th> <th>数学</th> <th>总分</th></tr><tr><th>牛小顿</th> <td>32</td> <td>17</td> <td>14</td> <td>63</td></tr><tr><th>伽小略</th> <td>28</td> <td>16</td> <td>15</td><td >59</td></tr><tr><th>薛小谔</th> <td>26</td> <td>22</td> <td>12</td> <td>60</td></tr><tr><th>海小堡</th> <td>16</td> <td>22</td> <td>16</td> <td>54</td></tr><tr><th>波小尔</th> <td>25</td> <td>11</td> <td>12</td><td >48</td></tr><tr><th>狄小克</th> <td>15</td> <td>8</td> <td>9</td> <td>32</td></tr></table></body></html>
边距、居中、边框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>成绩单</title><style type="text/css">.record{font: 14px 宋体;border:2px #777 solid;text-align:center;}.record td{border:1px #777 dashed;}.record th{border:1px #777 solid;}</style></head><body><table class="record"><caption>期中考试成绩单</caption><tr><th>姓名</th> <th>物理</th> <th>化学</th> <th>数学</th> <th>总分</th></tr><tr><th>牛小顿</th> <td>32</td> <td>17</td> <td>14</td> <td>63</td></tr><tr><th>伽小略</th> <td>28</td> <td>16</td> <td>15</td><td >59</td></tr><tr><th>薛小谔</th> <td>26</td> <td>22</td> <td>12</td> <td>60</td></tr><tr><th>海小堡</th> <td>16</td> <td>22</td> <td>16</td> <td>54</td></tr><tr><th>波小尔</th> <td>25</td> <td>11</td> <td>12</td><td >48</td></tr><tr><th>狄小克</th> <td>15</td> <td>8</td> <td>9</td> <td>32</td></tr></table></body></html>
单元格边距cellspacing
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>成绩单</title><style type="text/css">.record{font: 14px 宋体;border:2px #777 solid;text-align:center;}.record td{border:1px #777 dashed;}.record th{border:1px #777 solid;}</style></head><body><table class="record" cellspacing="0"><caption>期中考试成绩单</caption><tr><th>姓名</th> <th>物理</th> <th>化学</th> <th>数学</th> <th>总分</th></tr><tr><th>牛小顿</th> <td>32</td> <td>17</td> <td>14</td> <td>63</td></tr><tr><th>伽小略</th> <td>28</td> <td>16</td> <td>15</td><td >59</td></tr><tr><th>薛小谔</th> <td>26</td> <td>22</td> <td>12</td> <td>60</td></tr><tr><th>海小堡</th> <td>16</td> <td>22</td> <td>16</td> <td>54</td></tr><tr><th>波小尔</th> <td>25</td> <td>11</td> <td>12</td><td >48</td></tr><tr><th>狄小克</th> <td>15</td> <td>8</td> <td>9</td> <td>32</td></tr></table></body></html>
边距折叠(两个叠加不会变粗)border-collapse:collapse;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>成绩单</title><style type="text/css">.record{font: 14px 宋体;border:2px #777 solid;text-align:center;border-collapse:collapse;}.record td{border:1px #777 dashed;}.record th{border:1px #777 solid;}</style></head><body><table class="record" cellspacing="0"><caption>期中考试成绩单</caption><tr><th>姓名</th> <th>物理</th> <th>化学</th> <th>数学</th> <th>总分</th></tr><tr><th>牛小顿</th> <td>32</td> <td>17</td> <td>14</td> <td>63</td></tr><tr><th>伽小略</th> <td>28</td> <td>16</td> <td>15</td><td >59</td></tr><tr><th>薛小谔</th> <td>26</td> <td>22</td> <td>12</td> <td>60</td></tr><tr><th>海小堡</th> <td>16</td> <td>22</td> <td>16</td> <td>54</td></tr><tr><th>波小尔</th> <td>25</td> <td>11</td> <td>12</td><td >48</td></tr><tr><th>狄小克</th> <td>15</td> <td>8</td> <td>9</td> <td>32</td></tr></table></body></html>
单元格边距border-spacing
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>成绩单</title><style type="text/css">.record{font: 14px 宋体;border:2px #777 solid;text-align:center;border-spacing:10px;}.record td{border:1px #777 dashed;}.record th{border:1px #777 solid;}</style></head><body><table class="record" cellspacing="0"><caption>期中考试成绩单</caption><tr><th>姓名</th> <th>物理</th> <th>化学</th> <th>数学</th> <th>总分</th></tr><tr><th>牛小顿</th> <td>32</td> <td>17</td> <td>14</td> <td>63</td></tr><tr><th>伽小略</th> <td>28</td> <td>16</td> <td>15</td><td >59</td></tr><tr><th>薛小谔</th> <td>26</td> <td>22</td> <td>12</td> <td>60</td></tr><tr><th>海小堡</th> <td>16</td> <td>22</td> <td>16</td> <td>54</td></tr><tr><th>波小尔</th> <td>25</td> <td>11</td> <td>12</td><td >48</td></tr><tr><th>狄小克</th> <td>15</td> <td>8</td> <td>9</td> <td>32</td></tr></table></body></html>
如果觉得《【HTML+CSS网页设计与布局 从入门到精通】第15章-表格格式:边距/居中/边框/折叠》对你有帮助,请点赞、收藏,并留下你的观点哦!