5-4 使用table家庭为网页添加表格
发布时间:2021-03-04 编辑:√無∑情— 内容来源:收集于网络
有时候我们需要在网页当中添加一些数据,如某公司想展示该公司员工的通信录,如下表:

那我们就需要用到表格标签了, 这一章我们来学习表格标签,那么这些标签有什么特点呢?让我们一起来探索吧。想要在网页中实现以上效果,我们可以使用以下代码:

根据上面所学的知识,请从右边编辑器的第10行开始输入代码,实现以下效果

那我们就需要用到表格标签了, 这一章我们来学习表格标签,那么这些标签有什么特点呢?让我们一起来探索吧。想要在网页中实现以上效果,我们可以使用以下代码:

上面代码解释:
创建表格的四个元素:table、tr、th、td
1、<table>…</table>:整个表格以<table>标记开始、</table>标记结束。
2、<tr>…</tr>:表格的一行,所以有几对tr 表格就有几行。
3、<td>…</td>:表格的一个单元格,一行中包含几对<td>...</td>,说明一行中就有几列。
4、<th>…</th>:表格的头部的一个单元格,表格表头。
5、表格中列的个数,取决于一行中数据单元格的个数。
6、border属性可以为表格添加边框,属性值为数字。
注意:
1、table标签用来定义整个表格,为双标签,必须有结束标签。
2、table标签里面可以放caption标签和tr标签。
3、caption标签用来定义表格的标题。
4、tr标签用来设置表格的行,tr里面只能放th或者td标签,一组tr标签代表一行。
5、th用来设置表格的标题,会加粗居中显示。也就是th标签中的文本默认为粗体并且居中显示。
6、td同来设置表格的列,一组td标签代表一列。
7、table表格在没有添加border属性之前, 在浏览器中显示是没有表格线的。
任务根据上面所学的知识,请从右边编辑器的第10行开始输入代码,实现以下效果
源代码如下:
<table border="1">
<caption>前端三剑客</caption>
<tr>
<th>知识点</th>
<th>重要程度</th>
<th>难度</th>
<th>学习周期</th>
</tr>
<tr>
<td>html</td>
<td>5星</td>
<td>3星</td>
<td>7天</td>
</tr>
<tr>
<td>css</td>
<td>5星</td>
<td>4星</td>
<td>10天</td>
</tr>
<tr>
<td>js</td>
<td>5星</td>
<td>5星</td>
<td>20天</td>
</tr>
</table>
HTML5/CSS3速成教程教程分类
热门教程
- 8-7 后代选择器
- 7-2 CSS样式的优势
- 5-4 使用table家庭为网页添加表格
- 2-2 <p>段落标签和使用
- 3-3 使用<hr>标签实现水平线标签
- 8-10 分组选择器
- 6-7 使用<textarea>标签创建文本域
- 1-5 认识head标签
- 8-6 子选择器
- 2-8 <section>定义区段
- 5-3 在新建浏览器窗口中打开链接
- 8-8 通用选择器
- 5-2 使用<a>标签为网页添加超链接
- 6-3 placeholder属性的使用
- 6-8 使用label为input标签穿上衣服
- 7-3 CSS代码语法
- 6-9 <label>标签单选框、复选框的实现,让用户选择
- 6-4 input标签中的数字框number类型










