html-表格<table>

html-表格

作者: 零00_ | 来源:发表于2021-04-21 18:27 被阅读0次

html-表格

HTML-表格table-2018.07.05

HTMl-表格

table表格

table布局方式与div+css布局的区别细讲

html和css进阶二

CSS基本样式之表格

Bootstrap学习笔记（3）--表格\表单\图片

标签（二）

表格 - Tables

表格标签

<table></table> ：表格框架
<thead></thead> ：表格头部
<tbody></tbody> ：表格主体
<th></th> ：表头- - -加粗居中
<tr></tr> ：行
<td></td> ：列

表格常用属性

border:表格边框的宽度，eg:<table border="1">...</table>表示表格宽度为1
width:设置表格的宽度
height：设置表格的高度
align：表格中内容的排列方式，eg:<table align="center">...</table>表示内容居中显示
cellspacing:单元格和表格外边框之间的宽度，不写改属性时，默认是有间隙的，设置cellspacing="0"后，间隙消除
cellpadding:单元格内的内容和单元格边框之间的宽度

<strong>注意：</strong>以上这些属性是要写在<table>标签中

如果要合并单元格，可使用rowspan、colspan两个属性
rowspan：行合并
colspan：列合并
合并方法：
1.首先确定要合并的单元格
2.编写rowspan/colspan="合并单元格数量"，行合并在要合并的最上面一个单元格中写rowspan，列合并在要合并的最左边一个单元格中写colspan
3.删除剩下被合并的单元格

<strong>注意：</strong>这两个属性写在<td>标签中

小提示 - - -表格其他属性和查阅手册或百度具体查看

代码示例

代码示例1：

<table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>小红</td>
                <td>女</td>
                <td>8</td>
            </tr>
            <tr>
                <td>小明</td>
                <td>男</td>
                <td>9</td>
            </tr>
        </tbody>
    </table>

代码示例1效果：

示例1效果.png

代码示例2：

<table border="1">
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>小红</td>
                <td>女</td>
                <td>8</td>
            </tr>
            <tr>
                <td>小明</td>
                <td>男</td>
                <td>9</td>
            </tr>
        </tbody>
    </table>

代码示例2效果：

示例2效果.png

代码示例3：

<table border="1" width="300" height="150">
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>小红</td>
                <td>女</td>
                <td>8</td>
            </tr>
            <tr>
                <td>小明</td>
                <td>男</td>
                <td>9</td>
            </tr>
        </tbody>
    </table>

示例3效果：

示例3效果.png

代码示例4：

<table border="1" width="300" height="150" align="center">
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>小红</td>
                <td>女</td>
                <td>8</td>
            </tr>
            <tr>
                <td>小明</td>
                <td>男</td>
                <td>9</td>
            </tr>
        </tbody>
    </table>

示例4效果：

示例4效果.png

代码示例5：

<table border="1" width="300" height="150" align="center" cellspacing="0">
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>小红</td>
                <td>女</td>
                <td>8</td>
            </tr>
            <tr>
                <td>小明</td>
                <td>男</td>
                <td>9</td>
            </tr>
        </tbody>
    </table>

示例5效果：

示例5效果.png

代码示例6：

<table border="1" width="300" height="150" align="center" cellspacing="0" cellpadding="30">
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>小红</td>
                <td>女</td>
                <td>8</td>
            </tr>
            <tr>
                <td>小明</td>
                <td>男</td>
                <td>9</td>
            </tr>
        </tbody>
    </table>

示例6效果：

示例6效果.png

代码示例7：

<table border="1" cellspacing="0" align="center" width="300" height="150">
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>

示例7效果：

示例7效果.png

代码示例8：

<table border="1" cellspacing="0" align="center" width="300" height="150">
        <tr>
            <td></td>
            <td colspan="2"></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>

示例8效果：

示例8效果.png

代码示例9：

<table border="1" cellspacing="0" align="center" width="300" height="150">
        <tr>
            <td></td>
            <td colspan="2"></td>
        </tr>
        <tr>
            <td rowspan="2"></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </table>

示例9效果：