风——致敬最美好的风景

Joker.sun

已于 2024-12-02 17:35:48 修改

阅读量1.1k

点赞数 26

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

于 2024-12-02 15:05:30 首次发布

本文链接：https://blog.csdn.net/2401_82994301/article/details/144158474

版权

HTML 专栏收录该内容

7 篇文章

订阅专栏

"轻盈的风，偶尔也会变得沉重……虽然，只是凡人难以察觉的短短一瞬。",.风是轻盈的，但有时也是沉重的，但是往往你在街上，迎面微风，会让你感到身心愉悦，而这就是风的含义，风会带走你的烦恼，那么就让我们随着这轻柔的微风进入今天的学习吧！！！

昨天讲了关于HTML的一些细小的点，让今天让我们直入主题，今天的主题是表格。

什么是表格

说到表格，大家在生活中往往随处可见，但是带到代码里面你真的会用吗？这是一个好问题。

所谓的表格，其实就是整理你所收集到的数据，像我们所收悉的Excel，Access等等，他们都是整理数据，让数据更加直观得展现在用户的面前。

而在HTML中，表格是在网页设计中经常使用的一种信息展示形式，表格可以储存更多的内容，方便信息的传达。在HTML页面中，可以使用表格对一些内容进行排版等。

表格标签

以下我列举出了今天要讲的全部标签

标签	含义
<table>	表格标签
<tr>	行标签
<td>	单元格标签
<caption>	设置标题
<th>	设置表头
<td rowspan="要跨得行数">	合并单元格（行）
<td colspan="要跨的列数">	合并单元格（列）

表格基础

每一个表格都是又行和列组成的，而在HTML中，行和列都要写在<table>标签中，这很好理解，table英文翻译成表格，而行和列的话，具体请看下面。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>表格讲解</title>
</head>
<body>
    <h1>表格</h1>
    <table>
    <tr>
    <td>姓名</td>
    <td>职业</td>
    </tr>
    <tr>
    <td>Joker.sun</td>
    <td>学生</td>
    </tr>
</table>
</body>
</html>

刚刚上方介绍了<tr>为行<td>为列，上方代码中，列在行中定义的，其实想一下，没有行那里又来的列呢？

效果图在下方：

看到这里有人可能就要问了，"我又看不到有表格，那我直接打不就行了吗？"，别急，改变一下表格的宽度就好了。

就像下面这样：

在这里就要讲单元格边框了（border）可以看到上放两个图片一个是有边框，一个没有边框，这是下方图片的代码，大家看一下区别在哪里？

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>表格讲解</title>
</head>
<body>
    <h1>表格</h1>
    <table border="2">
    <tr>
    <td>姓名</td>
    <td>职业</td>
    </tr>
    <tr>
    <td>Joker.sun</td>
    <td>学生</td>
    </tr>
</table>
</body>
</html>

多了一个border="2",border是设置宽度，而2是像素，在设计中大家可以自由设置。

表格标题

表格中除了<td>可以设置表格的单元格，还有一种特殊的单元格——标题单元格。说人话就是在表格的上方给它加个标题，请看下方示例：

上方的自我介绍就是它的标题，用<caption>标签来表示，一般情况下标题默认居中。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>表格讲解</title>
</head>
<body>
    <h1>表格</h1>
    <table>
    <caption>自我介绍</caption>
    <tr>
    <td>姓名</td>
    <td>职业</td>
    </tr>
    <tr>
    <td>Joker.sun</td>
    <td>学生</td>
    </tr>
</table>
</body>
</html>

设置表头

表头的话就好说啦，表头一般位于表格的第一行，用来表示该列的内容。

可以看到上方的代码被加粗表示，这就是表头，它和<td>的使用方法大差不差，都是在<tr>标签中写的。

源代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>表格讲解</title>
</head>
<body>
    <h1>表格</h1>
    <table>
    <caption>自我介绍</caption>
    <tr>
    <th>姓名</th>
    <th>职业</th>
    </tr>
    <tr>
    <td>Joker.sun</td>
    <td>学生</td>
    </tr>
</table>
</body>
</html>

合并单元格

在表格中有的单元格可以跨多个行，有的也可以跨多个列，而在跨行时可以使用<rowspan>，跨列时可以使用<colspan>，下面就分开讲一下吧！

跨列：

可以看到图中的姓名那一行被合并了两个单元格,有的人可能不懂什么是跨行，什么是跨列，我来给你用图的形式解释一下。

所谓的合并行就是合并两个行之间，而列的话也是这样的，看图就可以懂啦！

所以上方的是跨列的效果图:

代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>表格讲解</title>
</head>
<body>
    <table border="1">
    <caption>自我介绍</caption>
    <tr>
    <th colspan="2">姓名</th>
    <th>职业</th>
    </tr>
    <tr>
    <td>Joker.sun</td>
    <td>sun</td>
    <td>学生</td>
    </tr>
</table>
</body>
</html>

跨列：

跨列的话就简单啦，直接上效果图:

跨行和跨列是一样的，只不过是将colspan换成rowspan，其他的都不变。

代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>表格讲解</title>
</head>
<body>
    <table border="1">
    <caption>自我介绍</caption>
    <tr>
    <th rowspan="2">名字</th>
    <td>Joker.sun</td>
    </tr>
    <tr>
    <td>sun</td>
    </tr>
</table>
</body>
</html>

小结

好啦，今天要讲的内容就全部讲完的，可能我讲的不是很全，但是毕竟是一个自学的中职生，风是轻柔的，风是清甜的，而我们在风中要学会去放下烦恼，放下忧愁，就好像是"假如生活欺骗了你，不要悲伤,不要心急。"我们亦是如此，让清风吹进心中，吹进我们的生活中，最后让我们用老薛的《像风一样》结尾，来结束这今天愉快的学习吧！我是在学校打代码的Joker.sun，我们下次见。（歌依旧是链接，学校资源有限，大家记得听哟！！！）。

今日电脑配置：