前端 表格 table

表格 table

table表格，块元素
(废弃) cellpadding=“20” cell单元格 单元格内边距
cellspacing=“0” 单元格之间的距离
thead用来包裹行标题，平时开发不用写，浏览器自动添加
rowspan单元格合并(行合并’‘高’)
colspan列合并 ‘宽’
/ 边框合并属性 collapse合并 separate分离/
border-collapse: collapse;**
/ 表格的布局 layout布局 设置单元格如何拆分表格宽度
auto 自动拆分 (内容多的多分，内容少的少分)
fixed固定分配/
/* table-layout: fixed; /*
/ 单元格边框之间的距离 注意:边框分离时使用它 /
/ border-spacing: 2px; /
/ 设置空单元格是否显示的,show显示 hide隐藏 /
/ empty-cells: hide; /
/ 选中tab1下面的tr里面的第一个子元素查看是否是td如果是则
使用样式 /
#tab1 tr td:nth-child(1){
width: 200px;
}
/:not()取反 除了xxx/
#tab1 tr td:not(:nth-child(1)){
width: 100px;
}**

                <!--  行标题-->
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>爱好</th>
            </tr>
 <tr>
               <!-- td单元格 -->
               <td>王金龙</td>
               <td>20</td>
               <!-- rowspan单元格合并(行合并''高') -->
               <td rowspan="2">男</td>
               <td></td>
           </tr>
           <tr>
               <td>张梦恩</td>
               <td>20</td>

               <td>爱编程</td>
           </tr>
        </tbody>
        <!-- tfoot表示表格的底部, 平时不用写，浏览器自动添加-->
        <tfoot>
            <tr>
                <!--colspan列合并 '宽'  -->
                <td colspan="3">总计:</td>
                <td>2人</td>
            </tr>