HTML-表格

幸运小圣

已于 2024-10-31 16:26:17 修改

阅读量70

点赞数

分类专栏： HTML 文章标签： html 前端

于 2023-04-21 23:02:40 首次发布

本文链接：https://blog.csdn.net/qq_53002037/article/details/130297405

版权

HTML 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

本文介绍了HTML表格的基本结构和常用属性，包括表格边框、宽度高度、单元格间距，以及thead、tbody、tfoot和tr、th、td的属性。特别提到了跨行(colspan)和跨列(rowspan)的用法，并给出了学生信息表格的例子作为展示。

摘要由CSDN通过智能技术生成

表格

了解表格：
一般表格都有表格标题、表格头部和表格柱体。
表格脚注可有可无

基本结构

在这里插入图片描述

常用属性

table的常用属性：

<table border="1"> #有边框
<table border="1" width="" heigth="">
设置表格宽度高度但是高度只对表格主体有用对表格头部和表格脚注没关系
<table cellspacing>
cellspacing 是为了调整单元格之间的边框缝隙的 =0则无缝隙默认有缝隙不是合并边框哦

caption没有常用属性，后期可用CSS修改样式

thead的常用属性：

使用 height属性： <thead heigth="" >
使用align （水平方向）属性：
左对齐： <thead align="left">
居中： <thead align="center">
右对齐： <thead align="right">
使用valign（垂直方向）属性：
上对齐： <thead valign="top">
居中： <thead valign="middle">
下对齐： <thead valign="bottom">

tbody的常用属性：

使用height
使用align
使用valign
要看table设置的height属性 table里设置的是最少值所以抛开表头表脚剩余的高度值，设置的若小于该值无反应变化

tfoot的常用属性

与thead和tbody的常用属性一致

tr的常用属性：

与thead和tbody的常用属性一致

th和td的常用属性：

都是单元格，
th/td：

使用height
使用weight
使用align
使用valign
rowspan 跨行的行数
colspan 跨列的列数
调整th的weight时那一列全部改变
调整th的height时那一行全部改变

*** 重要的跨行跨列属性：

 <tr>
     <th colspan="5">1-1</th>
 </tr>

<tr>
     <td rowspan="5">2-1</td> 
</tr>

之后可以靠CSS进行调整哦
举个栗子：


<body>
    <table border="1" width="500" heigth="300" cellspacing="">
        <caption>学生信息</caption>
        <thead heigth="50" align="center" valign="middle">
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>民族</th>
                <th>政治面貌</th>
            </tr>
        </thead>
        <tbody heigth="" align="center" valign="middle">
            <tr>
                <td>张三</td>
                <td>男</td>
                <td>18</td>
                <td>汉族</td>
                <td>团员</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>女</td>
                <td>18</td>
                <td>满族</td>
                <td>党员</td>
            </tr>
            <tr>
                <td>王五</td>
                <td>男</td>
                <td>19</td>
                <td>汉族</td>
                <td>群众</td>
            </tr>
        </tbody>
        <tfoot heigth="" align="center" valign="middle">
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td>共计：3人</td>
            </tr>
        </tfoot>
    </table>
</body>