HTML表格的使用

最新推荐文章于 2024-03-18 18:50:29 发布

我脾气呢

最新推荐文章于 2024-03-18 18:50:29 发布

阅读量340

点赞数

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/qq_45690359/article/details/127425417

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格标签</title>
</head>
<body>
    <!-- 跟无序列表一样，table里面只能嵌套tr标签 -->
    <!-- table的属性有：边框-border 单元格与边框的间隙-cellspacing  单元格内容的间隙-cellpading  单元格宽度-width  单元格高度-height  水平对齐方式-align:left center right -->
    <!-- cellspacing 单元格与边框的距离   cellpading 内容与单元格之间的距离 -->
    <!-- 一般三参为：0  border  cellspacing  cellpading -->
    <table width="1000px" align="center" border="1px" cellspacing="0" cellpading="0" height="300px">
          <!-- align设置对其方式 left左对齐 center居中 right 右对齐 -->
<tr align="center">
            <td>姓名</td>
            <td>性别</td>
            <td>工资</td>
        </tr>
        <tr align="center">
            <td>小红</td>
            <td>女</td>
            <td>500</td>
        </tr>
        <tr align="center">
            <td>小明</td>
            <td>男</td>
            <td>500</td>
        </tr>
    </table>
</body>
</html>

效果图自行运行

table的常用属性

属性	值	描述
align	Left（左）Center（中）Right（右）	设置表格相对周围元素的对齐方式。
bgcolor	rgb(x,x,x)#xxxxxxColorname（颜色名）	设置表格的背景颜色,有三种方式设置表格背景颜色。
border	Pixels（像素）	设置表格边框的宽度。
bordercolor	rgb(x,x,x)#xxxxxxColorname（颜色名）	设置表格边框的颜色，有三种方式设置表格边框的颜色。
cellpadding	pixels（像素）%	设置单元格边沿与其内容之间的空白，既可以设置为像素，也可以设置为百分比。
cellspacing	pixels（像素）%	设置单元格之间的空白，既可以设置为像素，也可以设置为百分比。
width	Pixels（像素）%	规定表格的宽度，既可以设置为像素，也可以设置为百分比。

设置表头 th替换td就ok th就是表头的意思

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表头标签</title>
</head>
<body>
    <!-- 表格标题一般用caption标签定义，体现出是一个整体 -->
    <!-- 一般表头用th取代td标签，表头内容自动加黑变粗居中 -->
    <table width="1000" align="center" border="0" cellspacing="0" cellpading="0" >
        <caption>我是表格标题</caption>
        <tr align="center">
            <th>姓名</th>
            <th>性别</th>
            <th>工资</th>
        </tr>
        <tr align="center">
            <td>小红</td>
            <td>女</td>
            <td>500</td>
        </tr>
        <tr align="center">
            <td>小明</td>
            <td>男</td>
            <td>500</td>
        </tr>
    </table>
</body>
</html>

基本介绍就这些

还有一个稍微难点的合并单元格（合并上下合并左右）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单标签</title>
</head>
<body>
    <!-- 合并单元格  跨行合并：rowspan   跨列合并：colspan -->
    <table width="500" border="1" cellspacing="1" cellpadding="1" >
        <tr>
            <td>姓名</td>
            <td>性别</td>
            <td>工资</td>
            <td>部门</td>
            <td>特殊说明</td>
        </tr>
        <tr>
            <td>小明</td>
            <td>男</td>
            <td>3500</td>
            <td>设计</td>
            <td rowspan="2">rowspan</td>
        </tr>        
        <tr>
            <td>小红</td>
            <td>女</td>
            <td>3000</td>
            <td>后端</td>
        </tr>
    </table>
    <table width="500" border="1" cellspacing="1" cellpading="1" >
        <tr>
            <td>小红</td>
            <td>小明</td>
            <td>小王</td>
        </tr>
        <tr>
            <td colspan="3">colspan</td>
        </tr>
    </table>    
</body>
</html>