表格

描述

以网格的形式来呈现数据，并且以二维数据表(有行有列)来显示数据内容

表格元素

<table>元素 - 表示定义表格

<tr>元素 - 表示定义表格中的行

<th>元素 - 表示定义表格中的表头

<td>元素 - 表示定义表格中的单元格

<caption>元素 - 表示定义表格中的标题

<thead>元素 - 表示定义表格的页眉

<tbody>元素 - 表示定义表格的主体

<tfoot>元素 - 表示表格的页脚

表格元素元素属性

border属性

表示设置表格的边框
- 属性值为数字值
- 会同时设置表格和单元格

rowspan属性

表示设置单元格的跨行
- 属性值为数字值

colspan属性

表示设置单元格的跨列
- 属性值为数字值

表格元素整体示例代码


    
    
    
                  
      随身物品
                                                                                         手机                    电脑                    手表                    平板               
         
                                                                      iphone X                    MacBook Pro 15寸                    卡西欧                    iPad Pro 12寸               
                                 iphone SE                    MacBook Pro 13寸                    尼尚                    iPad Pro 10寸               
         
                                                   以上二选一

表格样式

caption-side属性

表示设置表格中的标题元素在表格中的显示位置

border属性

表示设置边框
- border-width - 表示设置边框的宽度
- border-style - 表示设置边框的样式
- border-color - 表示设置边框的颜色
- border属性也允许简写：顺序是边框的宽度边框的样式边框的颜色

border-collapse属性

表示设置边框是分离还是合并
- 注意：在设置边框为合并后，border-spacing属性和empty-cells属性会失效

border-spacing属性

表示设置边框之间的距离

empty-cells属性

表示设置空白单元格的显示与隐藏

表格样式示例代码

    
        表格的样式    
    
         
      随身物品
                                               手机                    电脑                    手表                    平板               
         
                                          iphone X                    MacBook Pro 15寸                    卡西欧                    iPad Pro 12寸               
                                 iphone SE                    MacBook Pro 13寸                    尼尚                    iPad Pro 10寸               
         
                                          以上二选一