html表格解析

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>    

 

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 点我我会动 设计师:上身试试 返回首页