Web前端学习—基础篇(8)_表格的语法和样式有哪些、table如何实现跨行和跨列合并

前端学习——基础篇

三、HTML学习

11、表格

用途：

​ 早期 使用表格搭建页面
​ 现在 用来显示表格数据

语法

1、基础语法

    <table border="1"><!-- 表格容器，用来定义表格 -->
        <tr><!-- 表格中的行，必须嵌套在table标签内 -->
            <th>表头单元格</th><!-- 效果：文字加粗，水平、垂直居中 -->
            <th>单元格</th>
        </tr>
        <tr>
            <td>单元格</td>
            <td>普通单元格</td><!-- 效果：文字水平居左，垂直居中 -->
        </tr>
    </table>

表格包含table、tr行、单元格（th、td）；
单元格必须嵌套在tr标签内，它是一个容器，可以放置任意元素

2、复杂语法

    <table border="1">
        <caption>表格标题</caption><!-- 在表格水平居中位置显示 -->
        <thead><!-- 表格的头，用来放置标题之类的内容，内部必须有tr标签 -->
            <tr>
                <th>表头单元格</th>
                <th>单元格</th>
            </tr>
        </thead>
        <tbody><!-- 表格的正文，用来放置表格数据，内部必须有tr标签 -->
            <tr>
                <td>单元格</td>
                <td>普通单元格</td>
            </tr>
        </tbody>
        <tfoot><!-- 表格的脚注，用来放置脚注之类的内容，内部必须有tr标签 -->
            <tr>
                <td>单元格</td>
                <td>单元格</td>
            </tr>
        </tfoot>
    </table>

在一个表格中，可以有多个tbody标签，但是只能有一个thead、tfoot

特性

1、没有固定宽度的、没有内容的空单元格，默认平分整个表格
2、有内容的，没有固定宽度的单元格，宽度由内容撑开
3、同一列单元格，宽度只会识别一个，取最大值
4、同一行单元格，高度只会识别一个，取最大值

属性

• border属性 表格边框
  border="0|1"
  border="0" 默认，没有边框

• width属性 表格|单元格宽度

• height属性 表格|单元格高度

• cellpadding属性 边框和内容之间的距离，单位像素，可以省略

• cellspacing属性 单元格之间的距离，单位像素，可以省略，属性值默认为2px

  <table border="1" cellpadding="20" cellspacing="10"></table>
  

• 合并单元格

  • 跨行合并单元格 rowspan="合并单元格的数量"
  • 跨列合并单元格 colspan="合并单元格的数量"

• 表格中的css属性

  • border-collapse: collapse; 边框合并
  • border-collapse: separate; 边框分离 默认值
  • border-spacing属性 当边框分离时，行列之间的间距
    • 如果有两个属性值，第一个值表示水平方向，第二个值表示垂直方向
    • 如果有一个属性值，表示水平方向和垂直方向的间距

总结

​ 表格优点：方便排列有规律的、结构均匀的内容或数据

​ 表格缺点：产生垃圾代码、影响页面的下载时间，灵活性不大，难于修改