Table元素的使用

最新推荐文章于 2023-09-25 15:24:06 发布

因渺小而伟大

最新推荐文章于 2023-09-25 15:24:06 发布

阅读量1k

点赞数 2

分类专栏： HTML 文章标签： table表格的属性 table的使用 HTML的table属性怎样创建html的表格 table的属性

本文链接：https://blog.csdn.net/qq_43205282/article/details/103392905

版权

HTML 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

创建表格使用table元素

table元素有以下常用的属性

属性	含义
border	设置表格的边框宽度
width	设置表格的宽度
height	设置表格的长度
cellpadding	设置表格的内边距
cellspacing	设置表格的外边距

table里面的元素

元素	含义
caption	表标题
th	表名
tr	表行
td	单元格
thead	区分表格的头部
tbody	区分表格的主体
tfood	区分表格的底部
colgroupp、col	设置不同的列的样式颜色

td元素的属性

属性	含义
colspan	设置单元格跨行
rowspan	设置单元格跨列

示例：

<div style="margin: 30px 500px auto;text-align: center">
    <table border="1" width="300" >
        <thead>
             <caption>职业调查</caption>
             <th colspan="3">详情表</th>
        </thead>
        <tbody>
             <colgroup>
                  <col bgcolor="#f79d03">
                  <col bgcolor="#ffd4f5">
                  <col bgcolor="e80063">
            </colgroup>
            <tr>
                  <td>姓名</td>
                  <td>职业</td>
                  <td>性别</td>
            </tr>
            <tr>
                   <td>小明</td>
                   <td>学生</td>
                   <td>男</td>
            </tr>
            <tr>
                  <td>张三</td>
                  <td>教师</td>
                  <td>男</td>
            </tr>
             <tr>
                   <td>静静</td>
                   <td>教师</td>
                   <td>女</td>
             </tr>
        </tbody>
        <tfoot>
             <tr>
                   <td colspan="3">总计3人</td>
             </tr>
        </tfoot>

    </table>
</div>

结果

在这里插入图片描述

表格的内外边距默认是不合并的要使用单边框表格需要使用

border-collapse : collapse 其属性值

示例：

<style>
        table,td{
            border: 1px solid #0D9AFE;
        }
        table{
            width: 1000px;
            height: 400px;
            /*border-collapse: collapse属性，用于合并表格边框*/
            border-collapse: collapse;
            margin: 0 auto;
            text-align: center;
            background-color: #1f79a7;

        }
</style>
<body>
     <table>
         <tr>
             <td colspan="5">学生管理信息表</td>
         </tr>
         <tr>
             <td >id</td>
             <td>姓名</td>
             <td>年龄</td>
             <td>性别</td>
             <td>爱好</td>
         </tr>
         <tr>
             <td>id</td>
             <td>姓名</td>
             <td>年龄</td>
             <td>性别</td>
             <td>爱好</td>
         </tr>
     </table>
</body>

结果图

在这里插入图片描述

因渺小而伟大

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Table元素的使用

创建表格使用table元素table有以下常用的属性属性含义border设置表格的边框宽度width设置表格的宽度height设置表格的长度cellpadding设置表格的内边距cellspacing设置表格的外边距table里面的元素元素含义th表名tr表行td单元格colgroupp...
复制链接

扫一扫