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

news2024/10/5 16:20:49

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

第2关_创建简单的表格

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

参考答案

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>创建表格</title>
</head>
<body>
<!-- ********* Begin ******* -->
<table  border="4px" width="200" background="https://www.educoder.net/api/attachments/1208912">
  <tr>
    <td width="100">姓名</td>
    <td width="100">成绩</td>
  </tr>
  <tr>
    <td width="100">张三</td>
    <td width="100">90</td>
  </tr>
</table>
<!-- ********* End ********* -->
</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>
  <!-- ********* Begin ********* -->
  <tr height="40" align="center" valign="middle" bgcolor="blue">
  <!-- ********* End ********* -->
  <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>
<!-- ********* Begin1 ********* -->
<table border="4px" cellspacing="0" cellpadding="8" width="200">
<!-- ********* End1 ********* -->
<caption>成绩表</caption>
<tr height=40 align=center  valign=middle bgcolor=00ffff>
    <th>姓名</th>
    <th>成绩</th>
</tr>
<tr bgcolor=00ff00>
    <!-- ********* Begin2 ********* -->
    <td width="120">张三</td>
    <td align="center">90</td>

    <!-- ********* End 2********* -->
</tr>
</table>
</body>
</html>




 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/30805.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Netty系列(二):Netty拆包/沾包问题的解决方案

上一篇说到Netty系列&#xff08;一&#xff09;&#xff1a;Springboot整合Netty&#xff0c;自定义协议实现&#xff0c;本文聊一些拆包/沾包问题。 拆包/沾包问题 TCP是面向字节流的协议&#xff0c;在发送方发送的若干包数据到接收方接收时&#xff0c;这些数据包可能会被…

Linux笔记

一。基础思想 一切皆文件。 两条权限原则&#xff1a; 权限分组原则权限最小原则 su是切换用户&#xff0c;而sudo则是用root权限执行某操作&#xff08; 普通用户sudo安全&#xff09; Linux目录 系统只存在一颗文件树、从/开始&#xff0c;所有的文件都挂载在这个节点上。…

JaCoCo增量覆盖率的基本实现原理

什么是增量覆盖率 如图所示&#xff0c;在master分支提交了HelloController&#xff0c;然后从master拉了个新分支test&#xff1b;提交了第1次代码&#xff0c;增加了WorldController&#xff1b;提交了第2次代码&#xff0c;增加了DonController。增量的获取方式有两种&#…

报表工具使用教程-FineReport决策报表导出Plus

前言 通过决策报表导出插件&#xff0c;用户可以将单张决策报表导出为 Excel &#xff0c;PDF&#xff0c;Word 格式文件。 那么用户如何将决策报表导出为 PPT 或 Image 格式文件呢&#xff1f;如何将多张决策报表合并导出至一个文件呢&#xff1f; 1.实现思路 用户通过安装…

静态时序分析简明教程(七)]端口延迟

端口延迟一、写在前面1.1 快速导航链接二、端口延迟2.1 输入有效2.2 输出有效2.3 set_input_delay2.3.1 -clock clock_name2.3.2 -clock_fall2.3.3 -level_sensitive2.3.4 -rise/fall2.3.5 min/max2.3.6 -add_delay2.3.7 时钟延迟2.4 set_output_delay三、总结一、写在前面 一…

点击化学FAM荧光素:6-FAM-alkyne,FAM alkyne 6-isomer,6-炔基-羧基荧光素

【中文名称】6-炔基-羧基荧光素 【英文名称】 FAM alkyne,6-isomer&#xff0c;6-FAM-alkyne 【CAS】478801-49-9 【分子式】C24H15NO6 【分子量】413.39 【纯度标准】95% 【包装规格】25mg&#xff0c;50mg&#xff0c;100mg 【是否接受定制】可进行定制&#xff0c;定制时间周…

Kubernetes安装可视化界面

安装可视化界面编写配置文件安装kubernetes-dashboard创建访问账号访问可视化界面dashboard是kubernetes官方提供的可视化界面。 https://github.com/kubernetes/dashboard编写配置文件 创建配置文件存放目录并切换到其中&#xff1a; mkdir /usr/local/kubernetes-dashboard…

java面试强基(10)

Exception 和 Error 有什么区别&#xff1f; 在 Java 中&#xff0c;所有的异常都有一个共同的祖先 java.lang 包中的 Throwable 类。Throwable 类有两个重要的子类: Exception :程序本身可以处理的异常&#xff0c;可以通过 catch 来进行捕获。Exception 又可以分为 Checke…

Twitter网红账号营销,一定不能做的事

做社媒运营&#xff0c;我们都会创建一个官方账号与粉丝进行互动沟通&#xff0c;及时通知我们的新活动、产品&#xff0c;也是我们与粉丝建立联系的一个渠道方法。 推特群推王提示&#xff0c;虽然有这么多的好处&#xff0c;但是&#xff0c;也是有很多事项需要注意的&#…

服务器抓包简介

1、微服务服务器上抓包 2、在nginx服务器上抓包 1、服务器安装抓包软件 yum install -y tcpdump 2、服务器抓包命令 tcpdump -i any -s 0 -vvv -w /opt/qqgh.cap port 8080&#xff08;本服务器该服务的实际ip地址&#xff09; tcpdump -i eth0 host 10.30.224.170 -w result.…

14.函数的使用

函数的概念 函数是c语言的功能单位&#xff0c;实现一个功能可以封装成一个函数来实现。 定义函数的时候一切以功能为目的&#xff0c;根据功能去定函数的参数和返回值。 函数的分类 1.从定义角度分类&#xff08;即函数是谁实现的&#xff09; 库函数&#xff08;c库实现的…

Fedora怎么设置主菜单快捷键? Fedora快捷键的设置方法

Fedora主菜单可以设置打开快捷键&#xff0c;该怎么设置呢&#xff1f;下面我们就来看看Fedora快捷键的操作方法。 同时按【ALTF2】&#xff0c;输入gnome-terminal&#xff0c;打开终端。 单击右上角的主菜单按钮。 单击【配置文件首选项】。 单击【快捷键】。 单击【显示主菜…

使用DIV+CSS进行网页布局设计【HTML节日介绍网站——二十四节气】

&#x1f389;精彩专栏推荐 &#x1f4ad;文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 &#x1f482; 作者主页: 【主页——&#x1f680;获取更多优质源码】 &#x1f393; web前端期末大作业&#xff1a; 【&#x1f4da;毕设项目精品实战案例 (10…

【linux】进程概念

文章目录前言进程状态一、普遍的操作系统1、运行状态2、阻塞状态小结&#xff08;重要知识点&#xff09;3、新建/就绪状态4、挂起状态小结二、linux操作系统Linux内核源代码1、运行状态&#xff08;R&#xff09;2、&#xff08;浅度&#xff09;睡眠状态&#xff08;S&#x…

HTML CSS JS 网页设计作业「我的家乡吉林」

家乡旅游景点网页作业制作 网页代码运用了DIV盒子的使用方法&#xff0c;如盒子的嵌套、浮动、margin、border、background等属性的使用&#xff0c;外部大盒子设定居中&#xff0c;内部左中右布局&#xff0c;下方横向浮动排列&#xff0c;大学学习的前端知识点和布局方式都有…

HTML小游戏12 —— 汽车赛道飙车游戏(附完整源码)

&#x1f482; 网站推荐:【神级源码资源网】【摸鱼小游戏】&#x1f91f; 前端学习课程&#xff1a;&#x1f449;【28个案例趣学前端】【400个JS面试题】&#x1f485; 想寻找共同学习交流、摸鱼划水的小伙伴&#xff0c;请点击【摸鱼学习交流群】&#x1f4ac; 免费且实用的计…

【WSL】【Opencv】【C++】在windows中使用WSL开发C++程序的环境搭建

文章目录基本环境Ubuntu安装Opencv从源码安装opencv-4.x从源码安装opencv-3.x直接pkg包安装CLion工程cmake文件写法demo基本环境 &#xff08;1&#xff09;安装WSL&#xff1b; &#xff08;2&#xff09;安装cmake&#xff1a; wget https://github.com/Kitware/CMake/rele…

作为运维你还在想要不要学Python?听听运维老司机怎么说

概述 今天闲聊下为什么我比较建议运维人员去学python… 建议运维一定要会开发 &#xff08;文末送读者福利&#xff09; 现阶段&#xff0c;掌握一门开发语言已经成为高级运维工程师的必备技能&#xff0c;不会开发&#xff0c;你就不能充分理解你们系统的业务流程&#xff…

SpringSecurity(十六)---OAuth2的运行机制(中)-密码、客户端凭据授权类型以及刷新令牌

一、前言 本篇将讨论剩余的授权类型以及使用刷新令牌重新获得令牌等内容&#xff0c;仍然以概念为主。下一节我们将通过一个SSO实例让大家对授权码授权类型更加熟悉。 二、实现密码授权类型 此授权类型也被称为资源所有者凭据授权类型。使用此流程的应用程序会假定客户端收集…

Spark 3.0 - 6.ML 自定义 Transformer 踩坑大全

目录 一.新征程开始 - 道阻且长 二.从源码入手 - 一探究竟 1.Tokenizer 2.UnaryTransformer 三.取源码精髓 - 照猫画虎 四.从实际出发 - 小试牛刀 五.扫重重障碍 - 补阙挂漏 1.Task not serializable 2.jsonEncode only supports string 3.Invisibility Error 4.Non…