关于Table的边距问题
css属性
border-collapse
border-spacing
border
table属性
border
cellpadding
cellspacing
预览效果：
代码：http://jialiren.sinaapp.com/studycss/table-border.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title></title> <style type="text/css"> .td_color td{ background:#ff0; } .td_border td{ border:#000 1px solid; background:#ff0; } </style> </head> <body> <p>table 背景颜色</p> <table style="background:#ff0;"> <tr> <td>11</td> <td>12</td> <td>13</td> <td>14</td> </tr> <tr> <td>21</td> <td>22</td> <td>23</td> <td>24</td> </tr> <tr> <td>31</td> <td>32</td> <td>33</td> <td>34</td> </tr> </table> <p>td背景颜色</p> <table class="td_color"> <tr> <td>11</td> <td>12</td> <td>13</td> <td>14</td> </tr> <tr> <td>21</td> <td>22</td> <td>23</td> <td>24</td> </tr> <tr> <td>31</td> <td>32</td> <td>33</td> <td>34</td> </tr> </table> <p>cellpacing = 0 td背景颜色</p> <table cellspacing="0" class="td_color"> <tr> <td>11</td> <td>12</td> <td>13</td> <td>14</td> </tr> <tr> <td>21</td> <td>22</td> <td>23</td> <td>24</td> </tr> <tr> <td>31</td> <td>32</td> <td>33</td> <td>34</td> </tr> </table> <p>cellpadding = 0 td背景颜色</p> <table cellpadding="0" class="td_color"> <tr> <td>11</td> <td>12</td> <td>13</td> <td>14</td> </tr> <tr> <td>21</td> <td>22</td> <td>23</td> <td>24</td> </tr> <tr> <td>31</td> <td>32</td> <td>33</td> <td>34</td> </tr> </table> <p>cellpadding = 0 cellspacing = 0 td背景颜色</p> <table cellpadding="0" cellspacing="0" class="td_color"> <tr> <td>11</td> <td>12</td> <td>13</td> <td>14</td> </tr> <tr> <td>21</td> <td>22</td> <td>23</td> <td>24</td> </tr> <tr> <td>31</td> <td>32</td> <td>33</td> <td>34</td> </tr> </table> <p>style:border-collapse:separate 默认值不为0 td背景颜色</p> <table class="td_border" style="border-collapse:separate;" > <tr> <td>11</td> <td>12</td> <td>13</td> <td>14</td> </tr> <tr> <td>21</td> <td>22</td> <td>23</td> <td>24</td> </tr> <tr> <td>31</td> <td>32</td> <td>33</td> <td>34</td> </tr> </table> <p>td-border 1px border-collapse默认为separate</p> <table class="td_border"> <tr> <td>11</td> <td>12</td> <td>13</td> <td>14</td> </tr> <tr> <td>21</td> <td>22</td> <td>23</td> <td>24</td> </tr> <tr> <td>31</td> <td>32</td> <td>33</td> <td>34</td> </tr> </table> <p>td-border 1px border-spacing:0px</p> <table class="td_border" style="border-spacing:0px;"> <tr> <td>11</td> <td>12</td> <td>13</td> <td>14</td> </tr> <tr> <td>21</td> <td>22</td> <td>23</td> <td>24</td> </tr> <tr> <td>31</td> <td>32</td> <td>33</td> <td>34</td> </tr> </table> <p>border-spacing:10;td-border 1</p> <table class="td_border" style="border-spacing:10px"> <tr> <td>11</td> <td>12</td> <td>13</td> <td>14</td> </tr> <tr> <td>21</td> <td>22</td> <td>23</td> <td>24</td> </tr> <tr> <td>31</td> <td>32</td> <td>33</td> <td>34</td> </tr> </table> <p>border-collapse separate;border-spacing:5px;td-border 1</p> <table class="td_border" style="border-collapse:separate;border-spacing:5px;"> <tr> <td>11</td> <td>12</td> <td>13</td> <td>14</td> </tr> <tr> <td>21</td> <td>22</td> <td>23</td> <td>24</td> </tr> <tr> <td>31</td> <td>32</td> <td>33</td> <td>34</td> </tr> </table> <p>border-collapse collapse;border-spacing:5px;td-border 1 spcacing无效</p> <table class="td_border" style="border-collapse:collapse;border-spacing:5px;"> <tr> <td>11</td> <td>12</td> <td>13</td> <td>14</td> </tr> <tr> <td>21</td> <td>22</td> <td>23</td> <td>24</td> </tr> <tr> <td>31</td> <td>32</td> <td>33</td> <td>34</td> </tr> </table> </body> </html>