HTML——表格

Momo_159357

已于 2022-05-22 21:33:28 修改

阅读量1.8w

点赞数 43

分类专栏： java 文章标签： html

于 2022-05-19 15:12:37 首次发布

本文链接：https://blog.csdn.net/m0_62894677/article/details/124861412

版权

java 专栏收录该内容

20 篇文章 3 订阅

订阅专栏

🌳🌳🌳前言：本文总结了HTML表格的基础知识点

🍄表格——创建

表格由行和列组成，创建时，表格、表格的行、表格的列是分开创建的。

<table>标签用来创建表格，<tr>标签用来创建行，<td>标签用来创建列

🌰举个例子——创建表格

<table border="2px">  
    <tr>  
        <td>姓名</td>  
        <td>年龄</td>  
    </tr>  
    <tr>  
        <td>张三</td>  
        <td>18</td>  
    </tr>  
</table>

效果如下：

我们只能看到六个元素呈表格状的表现形式，但是没有表格的边框，那是我们丢掉了表格重要的属性： border，它是用来控制表格边框宽度的。

加上它假设 border="2px" ，我们再看一下效果：

加上后的代码为：

🍄表格——border

经过以上操作，我们创建了一个简单的表格，我们了解到border属性是用来固定表格的边框的宽度的，那么具体效果是什么呢？在这里我进行了简单的对比。

🍥表格——border

border="1px"

border="10px"

🍄表格——设置表格的宽、高

在上边，我们创建了一个简单的表格，那么我们如何设置表格的长度和宽度呢。

我们用 border 来规定表格的边框的宽度， width 规定表格的宽度， height 规定表格的高度。

设置属性的先后顺序为 border -- width -- height

🌰举个例子——设置表格的宽、高

创建一个表格，设置它的宽为100%，高为200px，边框为1px

效果如下：

在这里我们简单的探究下width，height 控制的究竟是哪里。

🍥表格——width

width="100px"

width="200px"

🍥表格——height

height="100px"

height="200px"

🍄表格——cellpadding

在上边我们设置了宽、高，可是内容是紧挨着边框的，那怎么使表格的内容和边框有间距呢？

我们用 cellpadding 来规定单元边沿与其内容之间的空白。

来张图说明一下具体是哪里：

灰色部分表示cellpadding，它的值表示灰色部分的宽度。

🌰 举个例子——`cellpadding`

创建一个表格，它的边框宽度为2px， cellpadding值为6

代码如下：

<table border="2" cellpadding="6">
    <tr>  
        <td>姓名</td>  
        <td>年龄</td>  
    </tr>  
    <tr>  
        <td>张三</td>  
        <td>18</td>  
    </tr>  
</table>

效果如下：

🍥表格——cellpadding

我们通过对比来探究一下 cellpadding 控制的是哪里。

cellpadding="1px"

cellpadding="10px"

🍄表格——cellspacing

前面表格看起来就好像有两个边框一样，怎么让它变成一条边框呢？

这是因为表格与th/td元素都有独立的边界。

我们用 cellspacing 来规定单元格之间的空间。

这里用图来说明，如图所示：

双箭头的大小表示 cellspacing 属性的值。

🌰举个例子——cellpadding

创建一个表格，它的边框宽度为1px，cellpadding值为10，cellspacing值为0

效果如下：

代码如下：

🍥表格——cellspacing

在这里我们通过对比来探究一下， cellspacing 控制的是哪里。

cellspacing="0"

cellspacing="10"

🍄表格——表格的标题

表格一般都有标题来说明这个表格具体是做什么的。

我们用<caption>标签来创建表格标题。

需要注意的是它的位置：紧随<table>标签之后。

🌰举个例子——`caption`

添加一个表格标题，内容为“信息统计”。

效果如图所示：

代码如图所示：

🍄表格——<td>标签的 rowspan 属性

先上要解决的问题吧，只用上述我们想要创建一个成绩表格时，只能每行都出现“科目”这个元素，

科目是包括语文、数学、英语的，每行都出现看起来分类不对，那么如何修改成融合的呢，这里就用到了rowspan属性，它是用来规定单元格可横跨的行数的。

我们用 rowspan 来规定单元格可横跨的行数。

修改成如下效果：

代码如图：

🍄表格——<td>标签的 colspan 属性

上面我们讲了 rowspan 是用来规定单元格可横跨的行数的，那我们想要横跨列该怎么办呢？

我们用 colspan 来规定单元格可横跨的列数。

效果如图：

代码如图：

🍄举一个表格的综合案例吧

效果如下：

边框为2px；
宽为100%；
cellspacing为0；
cellpadding为6；
标题内容为本周财政计划；
在 <style> 标签里设置文本为居中对齐。

代码如下：

<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <!-- ********* Begin ********* -->
    <style>
    body{
       margin:30px;
    }
    table{
       /*居中对齐*/
        text-align:center;     
    }
    </style>
    <!--设置表格-->
    <table border="2" cellpadding="6" cellspacing="0"  width="100%" >
        <caption>本周财政计划</caption>
        <tr>
            <td rowspan="2" colspan="2">项目</td>
            <td colspan="2">本周发生</td>
            <td rowspan="2">备注</td>
        </tr>
        <tr>
            <td>收入</td>
            <td>支出</td>            
        </tr>
        <tr>
            <td rowspan="3">收入</td>
            <td>贷款收回</td>
            <td>8700</td>
            <td>0</td>
            <td></td>
        </tr>
         <tr>
            <td>内部转款</td>
            <td>6000</td>
            <td>0</td>
            <td></td>
        </tr>
         <tr>
            <td>收入合计</td>
            <td>14700</td>
            <td>0</td>
            <td></td>
        </tr>
         <tr>
            <td rowspan="3">支出</td>
            <td>采购支出</td>
            <td>0</td>
            <td>5000</td>
            <td></td>
        </tr>
         <tr>
            <td>工资支出</td>
            <td>0</td>
            <td>7000</td>
            <td></td>
        </tr>
         <tr>
            <td>支出合计</td>
            <td>0</td>
            <td>12000</td>
            <td></td>
        </tr>
    </table>               
    <!-- ********* End ********* -->
</body>
</html>

🐳自我总结：

💬一起加油！

Momo_159357

关注

43
点赞
踩
196

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML——表格

🌳🌳🌳前言：本文总结了HTML表格的基础知识点目录🍄表格——创建🍄表格——border🍥表格——border🍄表格——设置表格的宽、高🌰举个例子——设置表格的宽、高🍥表格——width🍥表格——height🍄表格——cellpadding🌰举个例子——cellpadding🍥表格——cellpadding🍄表格——cellspacing🌰举个例子——cellpadding🍥表格——cellspacing🍄表格——表格的标题🌰举个例子...
复制链接

扫一扫