课04.如何做表格

项目下载地址:前往GitHub

课04.如何做表格大纲

比起前面我们学习过的那些HTML标签,要在网页里显示一张表格,可能会比之前的那些标签要稍稍麻烦一些。本节课,我们就来一起探索下,如何用HTML标签制作一张最简单的表格。

拆解一张表格

在写代码之前,我们先对一张表格做一下解刨,看看我们习惯的这张表格究竟都由哪些部分组成。

我们观察下上面这张学习计划表,这是一张5行2列的表格。

顶部第一行文字,文字被加粗了,是标题栏Head

然后下面的1~4条是一行行Row的记录,每一行都是由两小格子Cell组成

HTML里表示表格

在HTML中表格使用的是<table>标签表示,table英文意思就是表格,这次没用缩写。

表格里的每一行我们放在一个<tr>标签里,这里的tr的全称是table row,惯用的提取单词首字母的缩写方式。

每一行中的一小格,我们用<td>标签表示,这里的td的全称是table data cell,翻译过来就是表格中的数据项。

基础的表格

下面我们把上面这几个标签组合在一起使用下

<table>
  <tr>
    <td>1.看视频</td><td>15分钟</td>
  </tr>
  <tr>
    <td>2.动手练习</td><td>10分钟</td>
  </tr>
  <tr>
    <td>3.阅读教材</td><td>15分钟</td>
  </tr>
</table>
1
2
3
4
5
6
7
8
9
10
11

你看到<table>标签中嵌套了<tr>,每个<tr>标签中有嵌套了两个<td>标签。每个<td>标签内部都写了这一个小格里需要显示的文字。这样我们就组织了一张三行两列的表。

你可能会好奇,我们的表格头部,怎么没有写出来。不要着急,我现在就给你讲表格头部的标签。

我们的表格头部,使用一个<thead>标签来定义,英文是table head,这次用的是t+head的方式来进行缩写。

另外,<thead>里面的每一格式用<th>来表示。

<thead>
	<th>任务计划</th><th>时间安排</th>
</thead>
1
2
3

表格头部

上面就是一个表格头部的HTML写法。

最后我们把整个表头和表体放在一起,就形成了一张相对完成的表。

<table>
  <thead>
		<th>任务计划</th><th>时间安排</th>
	</thead>
  <tr>
    <td>1.看视频</td><td>15分钟</td>
  </tr>
  <tr>
    <td>2.动手练习</td><td>10分钟</td>
  </tr>
  <tr>
    <td>3.阅读教材</td><td>15分钟</td>
  </tr>
</table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

表格边框

你可以把上面的HTML标签复制下来,保存到一张网页里去。然后打开浏览器,把这张网页拖动到浏览器中,但是你会发现这个表格和我们平常看到的不太一样,没有表格框。

所以,这里我们需要设置一下表格的一个属性,让浏览器把表格的边框显示出来。

<table border="1">
  ...
</table>
1
2
3

我们只需要给<table>设置一个border属性,它的值我们设置为1。这样,我们再次刷新页面,就能看到带边框的表格了。

上面就是今天要讲的表格的几个常用标签的写法,你可以结合着我在视频里的课程表的演示,动手做一做练习。通过自己动手实践,加深你对这块知识的理解和掌握。

课程小结

今天这堂课,我们主要学习了表格相关的标签:

标签 含义
<table> 定义一个表格
<thead> 表格头部
<th> 表格头内的单元格使用th
<tr> 表格行
<td> 表格行里的单元格使用td

课后练习

利用今天学习的表格标签,制作下面的内容:

  1. 制作一张价格表
  2. 制作一张值日表

当然,还是那句话,这里毕竟不是学校。没有任何严格的限制,要求你非要做什么样的练习。一切都取决于你自己,你如果喜欢可以做你想做的任何表格。关键是把表格相关的这些标签用一用,巩固和加深你对这些知识的理解。