web前端学习笔记——表格

一、表格基础

标签：table、tr、td、th（table>tr>td）

table:表格，定义整个表格的大结构，可以设置边框属性（属性值：数字）

tr：table rows，表格的行，定义表格由多少行组成

td：table data，表格数据，表格单元格，定义每一行有多少个单元格

  <table border="2">
        <tr>
            <td>1-1</td>
            <td>1-2</td>
            <td>1-3</td>
            <td>1-4</td>
        </tr>
        <tr>
            <td>2-1</td>
            <td>2-2</td>
            <td>2-3</td>
            <td>2-4</td>
        </tr>
    </table>

效果：

发现单元格与单元格有空隙，解决方案：设置标签样式属性style，属性值：border-collapse：collapse；表示边框塌陷

 <table border="2" style="border-collapse: collapse;">
        <tr>
            <td>1-1</td>
            <td>1-2</td>
            <td>1-3</td>
            <td>1-4</td>
        </tr>
        <tr>
            <td>2-1</td>
            <td>2-2</td>
            <td>2-3</td>
            <td>2-4</td>
        </tr>
    </table>

效果：

扩：

表头单元格：th，在表格绘制中替代td的位置，自带默认的css样式，文字显示粗体居中

二、合并单元格

属性：

rowspan：跨行合并，上下合并

colspan：跨列合并，左右合并

属性值：数字，数字是几就代表跨几行或几列合并

案列：

 <table border="1" style="border-collapse: collapse; width:600px;">
        <tr>
            <td colspan="2">1</td>
            <td rowspan="2">2</td>
            <td colspan="2">3</td>
        </tr>
        <tr>
            <td>4</td>
            <td rowspan="2">5</td>
            <td>6</td>
            <td rowspan="2">7</td>
        </tr>
        <tr>
            <td rowspan="2">8</td>
            <td>9</td>
            <td>10</td>

        </tr>
        <tr>
            <td>11</td>
            <td colspan="2">12</td>
            <td>13</td>
        </tr>
    </table>

效果：
方法：

1. 先列出所有的tr，以最小单元格为准
2. 添加每一行的td
3. 划分时，以顶边对齐的属于同一行
4. 查看哪个单元格有跨行或跨列，属性值参考最小的单元格

三、表格分区

一个完整的表格分为四个大区域：表格标题、表格头部、表格主体、表格页脚

caption：表格的标题，

thead：table head，表格的头部，内部用tr>th

tbody:table body,表格的主体，内部用tr>td

tfoot:table foot,表格的页脚，内部用tr>td

 <table border="1" style="border-collapse: collapse;width: 200px;">
        <caption>标题</caption>
        <thead>
            <tr>
                <th>头部1</th>
                <th>头部2</th>
                <th>头部3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>主体1</td>
                <td>主体2</td>
                <td>主体3</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="3">页脚1</td>
            </tr>
        </tfoot>
    </table>

效果：

注：不论书写顺序，浏览器在加载的时候，都是从caption、thead、tbody、tfoot的顺序执行。