Web(二)html5基础-表格基本结构

Latte Moments开发

2024-05-31 帮助1人

第1关_网页表格的基本概念

学新通

第2关_创建简单的表格

本关任务：创建一个两行两列的表格。
相关知识：为了完成本关任务，你需要掌握：1.表格的结构及对应的标签，2.表格标签的属性。
表格的结构及对应的标签。一个基本的表格是由行和每行中的单元格组成的，一般要包含表格标题、项目标题和数据资料三个要素。例如下图所示的表格基本表格

参考答案

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>创建表格</title>
</head>
<body>
<table border="4px" width="200" background="https://www.educoder.net/api/attachments/1208912">
<caption>成绩表</caption>
<tr>
<th width="100">姓名</td>
<th width="100">成绩</td>
</tr>
<tr>
<td width="100">张三</td>
<td width="100">90</td>
</tr>
</table>
</body>
</html>

第3关_表格行样式的设置

编程要求：根据提示，在右侧编辑器中的Begin - End区域内补充代码，用于设置表格第一行的样式，具体要求是： 1.该行的行高为40。 2.该行单元格内容的水平和垂直对齐方式都为居中， 3.该行的颜色代码设置为00ffff

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>表格行样式的设置</title>
</head>
<body>
<table border="4px" background="https://www.educoder.net/api/attachments/1208912" width="200">
<caption>成绩表</caption>
<tr height="40" align="center" valign="middle" bgcolor="00ffff">
<th width="100">姓名</td>
<th width="100">成绩</td>
</tr>
<tr>
<td>张三</td>
<td>90</td>
</tr>
</table>
</body>
</html>

第4关_表格中单元格样式的设置

编程要求
1.该Begin1 - End1区域内添加table标签，设置表格边框线的粗细为4px，单元格之间的间隙为0，单元格内文本的内边距为8，表格总宽度200。
2.Begin2 - End2区域内添加两个数据单元格标签，第一个数据单元格标签中设置单元格的宽度为120，单元格内的文本为“张三”；第二个数据单元格标签中设置其文本的水平对齐方式为居中，单元格内的文本为“90”。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>表格单元格样式的设置</title>
</head>
<body>
<table border="4px" cellspacing="0" cellpadding="8" width="200">
<caption>成绩表</caption>
<tr height=40 align=center valign=middle bgcolor=00ffff>
<th>姓名</th>
<th>成绩</th>
</tr>
<tr bgcolor=00ff00>
<td align="left" width="120">张三</th>
<td align="center">90</th>
</tr>
</table>
</body>
</html>

这篇好文章是转载于：编程之路

Web(二)html5基础-表格基本结构

第1关_网页表格的基本概念

第2关_创建简单的表格

参考答案

第3关_表格行样式的设置

第4关_表格中单元格样式的设置

photoshop保存的图片太大微信发不了怎么办

word里面弄一个表格后上面的标题会跑到下面怎么办

《学习通》视频自动暂停处理方法

photoshop扩展功能面板显示灰色怎么办

Android 11 保存文件到外部存储，并分享文件

微信公众号没有声音提示怎么办

TikTok加速器哪个好免费的TK加速器推荐

excel下划线不显示怎么办

excel打印预览压线压字怎么办

怎样阻止微信小程序自动打开