HTML笔记14：表格

2022-06-27 本文已影响0人 _百草_

1. 表格

    <!--table标签来定义表格-->
    <table>
        <!-- tr定义行 -->
        <tr>
            <!-- td来定义每行被分割成的若干单元格 -->
            <!--td表示数据单元格的内容；可以包括文本、图片、列表、段落、表单、水平线、表格等-->
            <td>1行第1单元格</td>
            <td><img src="img/001.png" alt="缺省图片"></td>
            <td><ul>
                <li>1</li>
                <li>2</li>
            </ul></td>
        </tr>
        <tr>
            <td><p>这是一个段落</p></td>
            <td><hr/></td>
            <td><form action=""><input type="text" name="pwd" id="pwd" placeholder="请输入密码"></form></td>
        </tr>
    </table>

表格(默认无边框)

2. 边框属性&边距属性&间距

2.1 边框border

不添加属性，则默认无边框，若不填充内容，则不展示表格;border

css 属性

添加css
border

border

2.2 单元格边距cellpadding

cellpandding:单元格边与单元格内容之间的间距

<table  cellpadding="10px">
...

image.png

2.3 单元格间距cellspacing

<table cellspacing="10px">
...

单元格间距

3. 表头

th表示表头（代替td）

表格的表头

4. 合并单元格

colspan
合并2列
rowspan
合并2行
合并行&列

合并行&列

4. 其他属性

bgcolor
表格或单元格背景色

bgcolor

5. 表格标题

<table cellspacing="10px">
    <caption>表格的标题</caption>
    <tr >
        <th>header1</th>
        <th>header2</th>
    </tr>
    <tr >
        <td>单元格</td>
        <td>单元格</td>
    </tr>
</table>

表格标题

6. 页眉&页脚

thead&tfoot
thead, tbody, 和 tfoot 元素默认不会影响表格的布局。但可以使用 CSS 来为这些元素定义样式，从而改变表格的外观。
<thead> 标签必须被用在以下情境中：作为 <table> 元素的子元素，出现在 <caption>、<colgroup> 元素之后，<tbody>、 <tfoot> 和 <tr> 元素之前。