html表格解析

杜杜丶Du 2018-03-16 15:00:19

15273

分类专栏： Css3 文章标签：表格

最后发布:2018-03-16 15:00:19首次发布:2018-03-16 15:00:19

本文链接：https://blog.csdn.net/a772116804/article/details/79581610

版权

https://blog.csdn.net/a772116804/article/details/78836480 另一篇同文

代码中给table元素添加 table-layout: fixed; 或者给td添加 word-break: break-all ，都可以达到表格安装我们设置的宽度显示

表格的行：tr 每行中的列：td

　　表格的表头：<th></th> 默认加粗，单元格居中（居中、加粗） align="middle"

　　表格标题：caption

　　跨列：colspan，当某个格跨n列时，colspan ="n"

跨行：rowspan，当某个格跨n行时，rowspan ="n+1"

colspan是横向合并(可以理解为宽)；rowspan是纵向合并(可以理解为高)。

cellspacing设置为“0”，显示的结果就是第一个表格的每个单元格之间的距离为0。若将表格边框设为“0”，则单元格的距离就是0了。

cellpadding属性用来指定单元格内容与单元格边界之间的空白距离的大小。

cellspacing="0" cellpadding="0"为html中为table定义的属性,在CSS中没有.
cellpadding 对应 padding
cellspacing 对应 margin

<!DOCTYPE html>    
<html lang="en">    
<head>    
  <meta charset="UTF-8">    
  <title>tab</title>     
</head>    
<style type="text/css">  
  table{margin: auto;}  
</style>  
<body>       
<table border="2" cellspacing="0" >  
 <caption>表格标题</caption>  
   <tr>  
    <th>序号</th>  
    <th>日期</th>  
    <th>姓名</th>  
    <th>时间</th>  
    <th>身份证号</th>  
    <th>单位</th>  
    <th>来访事由</th>  
    <th>记录人</th>  
    <th>备注</th>  
   </tr>  
   <tr>   
    <td style="text-align: center;">1</td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
   </tr>  
   <tr>  
    <td style="text-align: center;">2</td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
   </tr>  
      <tr>  
     <td rowspan="4" align="middle">sssssssssss</td>  <!--跨三行 rowspan="4" rowspan="n+1"-->
   </tr>  
   <tr>  
    <td style="text-align: center;">3</td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
   </tr>  
    <tr>  
    <td style="text-align: center;">4</td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
   </tr>  
    <tr>  
    <td style="text-align: center;">5</td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
   </tr>  
   <tr>  
    <td style="text-align: center;">6</td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
   </tr>  
   <tr>  
    <td style="text-align: center;">7</td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
    <td></td>  
   </tr>  
   <tr>  
    <td colspan="9" align="middle">经被访人核实，外来人员登记后方可入内。</td>  
   </tr>  
  </table>  
</div>    
</body>    
</html>