[HTML]Web前端开发技术15（HTML5、CSS3、JavaScript ）表格，bordercolorlight，frame，valign，rowspan，colspan——喵喵画网页

希望你开心，希望你健康，希望你幸福，希望你点赞！

最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！

喵喵喵，你对我真的很重要！

目录

前言

表格

表格

表格标记

表格标记-语法

表格属性设置

表格边框样式属性

表格单元格间距、单元格边距属性

表格水平对齐

设置表格行的属性

表格行的属性-设置

设置单元格的属性

设置单元格的属性-单元格跨行、列

表格嵌套

课后练习

网页标题：计算机报价表

网页标题：会员注册

网页标题：列表标签的应用

总结

前言

掌 握设计表格所有标记和属性。
掌握表格行标记的属性及设置方法。
掌握表格单元格的跨行与跨列属性的设置方法。
掌握表格的嵌套方法。
学会在表格中嵌入各种页面元素。
学会使用表格进行简易网页布局。

表格

表格

       表格是网页设计制作不可缺少的元素，它以简洁明了和高效快捷的方式将图片、文本、数据和表单的元素有序的显示在页面上，让我们可以设计出漂亮的页面。

表格标记

表格标记-语法

l 在 HTML 中，使用 <table></table> 标记可以创建表格。

   <table>

        <caption>插入表格标题</caption>

       <tr>

           <th></th> ><th></th> ><th></th> …

      </tr>

      <tr>

           <td ></td> <td ></td> <td ></td> …

      </tr>

  </table>

l 语法说明

   <table></table>标记表示插入表格；<tr></tr>表示插入一行；<td></td>表示插入一列；<th></th>插入表头。

表格属性设置

表格是网页文件中布局的重要元素，制作网页的过程中常常需要对网页中的表格做一些设置，对表格的设置实质是对表格标记属性的一些设置。

1.表格的边框属性--border

2.边框的颜色--bordercolor

3.亮边框的颜色--bordercolorlight

4.暗边框的颜色– bordercolordark

5.背景颜色—bgcolor

6.背景图像—background

7.表格宽度与高度—width/height

8.表格对齐属性-align

  利用表格属性实现表格边框线的设置以及美化表格的目的。

 基本语法：

<table border"" bordercolor="" bordercolorlight""  align="center" bordercolordark="" > </table >

表格边框样式属性

语法： <table  frame=” ” rules=” ”> </table >

      frame: 设置表格边框样式； rules: 设置表格内部边框样式

表格单元格间距、单元格边距属性

基本语法：

      <table cellspacing=“5px” cellpadding=“5px”>  </table >

    cellspacing:设置表格的单元格和单元格之间的间距，默认值是2px，使得表格布局不会显得过于紧凑。

    cellpadding:设置单元的内容与边框的距离。

表格水平对齐

<!-- edu_11_3_4.html -->
……
<body>
<div id="div1" class="">	
<table align="left"  border="2">
  <csaption>学生信息表(左对齐)</caption>
  <tr>
    <td>王小品 </td>
    <td>商学院 </td>
    <td>110204</td>
  </tr>
  <tr>
    <td>李白 </td>
    <td>机械学院 </td>
    <td>100244</td>
  </tr> 
</table>
</div>
……

<table align="center"  border="2"> </table>

设置表格行的属性

表格行tr标记的属性用于设置表格某一行的样式，其属性设置

表格行的属性-设置

表格行内容水平对齐的属性

    <tr align="left | center | right"> </tr>

  表格行内容垂直对齐的属性

    <tr valign="top | middle | bottom"></tr>

例：<tr align=“left”valign=“middle”> </tr>

设置单元格的属性

表格列标记td的属性可以设置表格单元格的显示风格。常用的属性如下表所示。单元格的颜色、边框和对齐属性与行tr标记一样。

设置单元格的属性-单元格跨行、列

<td>的属性用于设定表格中某一单元格的属性。

单元格跨行 rowspan ( 跨行合并 - 纵向合并 )
单元格跨列 colspan ( 跨列合并 - 横向合并 )

表格嵌套

       表格嵌套是一种常用的页面布局方式。利用表格嵌套可以设计比较复杂且美观的页面效果。通常情况下，使用表格嵌套时，表格不宜过多使用，否则会降低网站访问速度。表格嵌套一般采用在单元格内嵌套表格。

课后练习

  • 网页标题：计算机报价表

  • 表格边框为3px 实线 颜色为“#ff6600”；
  • 单元格边框1px实线 颜色为“#ff9900”；
  • 所有图片宽120px，高120px；
  • 提示：&yen-人民币符号

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>计算机报价表</title>
<style>
	caption{
		font-size:20px;
		font-weight:bold;
	}
	table{
		border:3px solid #f60;
	}
	img{width:120px;
	height:120px;
	}
	td{
		border:1px solid #f90;
	}
</style>
</head>

<body>
<table>
	<caption>计算机报价单</caption>
    <tr>
    	<th>类型</th>
        <th>型号</th>
        <th>价格</th>
        <th>图片</th>
    </tr>
   <tr>
	<td rowspan="3">笔记本</td>
    <td>宏基(Acer)AS4552-P362G32MNCC</td>
    <td>&yen;2799</td>
    <td><img src="images/Acer.jpg"></td>
    </tr>
    <tr>
        <td>戴尔(Dell)14VR-188</td>
        <td>&yen;3499</td>
        <td><img src="images/Dell.jpg"></td>
    </tr>
    <tr>
        <td>联想(LenovoG470AH2310W42G500P7CW3(DB)-CN</td>
        <td>&yen;4149</td>
        <td><img src="images/Lenovo.jpg"></td>
    </tr>
    <tr>
        <td rowspan="2">台式</td>
        <td>戴尔家用(DELL)I560SR-656</td>
        <td>&yen;3599</td>
        <td><img src="images/DellT.jpg"></td>
    </tr>
    <t>
        <td>宏图奇眩(Hiteker)HS-5508-TF</td>
        <td>&yen;3399</td>
        <td><img src="images/Hiteker.jpg"></td>
    </tr>
</table>
</body>
</html>

  • 网页标题：会员注册

  • 要求所有的控件都必须设置name属性，单选及多选按钮必须设置value属性
  • 文本框：必填项，设置用户填写输入字段的提示
  • 密码框：必填项，设置用户填写输入字段的提示
  • 单选按钮组，默认选中男
  • 复选按钮，默认选中2、3项
  • 添加文件上传域
  • 添加多行文本域，10行30列，并设置默认文字信息
  • 添加提交按钮、重置和普通按钮（注册新会员），注册新会员按钮的onClick属性设置为：οnclick="alert('注册新用户');"

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>会员注册</title>
<style>
	input{font-family:Arial, Helvetica, sans-serif;}
</style>
</head>

<body>
<form name="register" method="post" action="http://localhost/testform">
	<h1>会员注册</h1>
    <hr>
    <div>用户名：<input type="text" name="username" required placeholder="请输入用户名"></div><br/>
    <div>密&emsp;码：<input type="password" name="passw" required placeholder="请输入密码"> </div><br/>
    <div>性别：<input type="radio" name="sex" value="male" checked>男 <input type="radio" name="sex" value="female">女</div><br>
    <div>你通过哪些渠道了解到我们的产品：<br/><input type="checkbox" name="know" value="c1">朋友推荐<input type="checkbox" name="know" value="c2" checked>搜索引擎 <input type="checkbox" value="c3" name="know" checked>媒体宣传<input type="checkbox" value="c4" name="know">其他</div><br/>
    <div>上传个人照片<input type="file" name="poto"></div><br/>
    <div>个人简介：<br><textarea rows="10" cols="30">这个人很懒，什么也没有留下</textarea></div><br/>
    <div><input type="submit" value="提交" name="submit"> <input type="reset" value="重置" name="reset"> <input type="button" value="注册新会员" name="regist" onClick="javascript:alert('注册新用户');"></div>
</form>
</body>
</html>

  • 网页标题：列表标签的应用

  • 表单名为select，表单的提交方式设置为post，表单提交的网址设置为：http://localhost/testform
  • 所有的列表select必须设置name属性，所有的option必须设置value属性
  • 设置简单列表菜单中的“樱桃”选项为禁用选项
  • 如图所示，在分组列表菜单中设置苹果和土豆为默认选中

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>列表标签的应用</title>
</head>

<body>
<h1>列表标签select的应用</h1>
<hr>
<form name="select" method="post" action="http://localhost/testform">
<p>简单下拉菜单（单选）：
<select name="food1">
	<option value="apple1">苹果</option>
    <option value="cherry1">樱桃</option>
    <option value="grape1">葡萄</option>
</select>
</p>
<p>简单列表菜单（多选）：
<select name="food2" size="3" multiple>
	<option value="apple2">苹果</option>
    <option value="cherry2" disabled>樱桃</option>
    <option value="grape2">葡萄</option>
</select>
</p>
<p>分组下拉菜单（单选）：
<select name="food3">
  <optgroup label="水果类">
	<option value="apple">苹果</option>
	<option value="banana">香蕉</option>
	<option value="grape">葡萄</option>
</optgroup>
<optgroup label="蔬菜类">
	<option value="pumpkin">南瓜</option>
	<option value="bean">四季豆</option>
	<option value="potato">土豆</option>
</optgroup>
</select>
</p>
<p>分组列表菜单（多选）：
<select name="food4" size="6" multiple>
  <optgroup label="水果类">
	<option value="apple">苹果</option>
	<option value="banana">香蕉</option>
	<option value="grape">葡萄</option>
</optgroup>
<optgroup label="蔬菜类">
	<option value="pumpkin">南瓜</option>
	<option value="bean">四季豆</option>
	<option value="potato">土豆</option>
</optgroup>
</select>
</p>
</form>
</body>
</html>

总结

本章主要介绍了设计表格所有标记和标记属性。
在进行表格设计，需要考虑好表格的对齐方式设计。表格的对齐方式分三类：表格 table 标记的 align 属性、行 tr 标记的 align 和 valign 、列（单元格） td 标记的 align 和 valign 。这些属性的设置如果使用 CSS 样式进行定义，效果更好。
设计表格的背景颜色与背景图像时，最好采用 CSS 样式表，这样效果更易控制。
由于表格的单元格内的内容不同，如果插入大的图像或视频文件时网络延迟会很大，易造成网页打不开，影响网站的正常访问。通常采用表格进行布局时，会使用表格嵌套来细化页面布局。表格嵌套时，必须在单元格中嵌入表格。

希望你开心，希望你健康，希望你幸福，希望你点赞！

最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！

喵喵喵，你对我真的很重要！

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

DataX详解和架构介绍

DataX详解和架构介绍

系列文章目录 一、 DataX详解和架构介绍 二、 DataX源码分析 JobContainer 三、DataX源码分析 TaskGroupContainer 四、DataX源码分析 TaskExecutor 五、DataX源码分析 reader 六、DataX源码分析 writer 七、DataX源码分析 Channel 文章目录 系列文章目录DataX是什么&#xff…
阅读更多...
探索C语言结构体：编程中的利器与艺术

探索C语言结构体：编程中的利器与艺术

✨✨ 欢迎大家来到贝蒂大讲堂✨✨ &#x1f388;&#x1f388;养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; 所属专栏&#xff1a;C语言学习 贝蒂的主页&#xff1a;Betty‘s blog 1. 常量与变量 1. 什么是结构体 在C语言中本身就自带了一些数据类型&#x…
阅读更多...
前端实现标题滚动点击导航

前端实现标题滚动点击导航

效果图 右边滚动的html代码 <div class"right-box"><el-tabs v-model"isScrollNow" tab-position"right" class"updateTab" tab-click"scrollTo"style"height: fit-content;"><el-tab-pane label…
阅读更多...
C语言之随心所欲打印三角形，金字塔，菱形（倒金字塔）

C语言之随心所欲打印三角形，金字塔，菱形（倒金字塔）

个人主页&#xff08;找往期文章包括但不限于本期文章中不懂的知识点&#xff09;&#xff1a; 我要学编程(ಥ_ಥ)-CSDN博客 目录 三角形 金字塔 倒金字塔 菱形 三角形 题目&#xff1a;根据输入的行数打印对应的三角形。&#xff08;用 * 号打印&#xff09; #includ…
阅读更多...
Python学习路线 - Python高阶技巧 - SQL入门和实战

Python学习路线 - Python高阶技巧 - SQL入门和实战

Python学习路线 - Python高阶技巧 - SQL入门和实战 SQL章节前言无处不在的SQL 数据库介绍无处不在的数据库数据库如何存储数据数据库如何存储数据数据库管理系统(数据库软件)数据库和SQL的关系 Mysql的安装Mysql的介绍Mysql的版本MySQL安装配置环境变量 Mysql的入门使用在命令提…
阅读更多...
6-2、T型加减速计算简化【51单片机+L298N步进电机系列教程】

6-2、T型加减速计算简化【51单片机+L298N步进电机系列教程】

↑↑↑点击上方【目录】&#xff0c;查看本系列全部文章 摘要&#xff1a;本节介绍简化T型加减速计算过程&#xff0c;使其适用于单片机数据处理。简化内容包括浮点数转整型数计算、加减速对称处理、预处理计算 一、浮点数转整型数计算 根据上一节内容已知 常用的晶振大小…
阅读更多...
JVM 性能调优 - 四种引用(4)

JVM 性能调优 - 四种引用(4)

为什么会有四种引用 我们先回顾下在 Java 虚拟机内存体系(1) 中提到了的垃圾回收算法 1、引用计数法 原理：给对象添加一个引用计数器，每当有一个地方引用它，计数器的值就加一。每当有一个引用失效，计数器的值就减一。当计数器值为零时，这个对象被认为没有其他对象引用，…
阅读更多...
一个冷门的js加密逆向分析

一个冷门的js加密逆向分析

先上加密代码供各位先看为敬 (function(){function j2f6c82(ve7deb){var i86905"VPfaI5H|Nc]$^rhn1B8dR.w/u-4!ZetJ?XFM2SY(&sbjlW6GEmAd[L0i,;yx%qozC9U_~g37OkKTpvQD:";var z1a52da8"4H_&|GNcEon:B2-?h]lx.(gkzOdA3eL,9;myV8bJwriRSt6sX75Fvu^p0Ij…
阅读更多...
Linux-3进程概念(一)

Linux-3进程概念(一)

1.冯诺伊曼结构 1.1 冯诺依曼结构的概念 冯诺依曼结构&#xff0c;又称为普林斯顿结构&#xff0c;是一种将程序指令存储器和数据存储器合并在一起的存储器结构。程序指令存储地址和数据存储地址指向同一个存储器的不同物理位置&#xff0c;因此程序指令和数据的宽度相同&…
阅读更多...
日历功能——C语言

日历功能——C语言

实现日历功能&#xff0c;输入年份月份&#xff0c;输出日历 #include<stdio.h>int leap_year(int year) {if(year % 4 0 && year % 100 ! 0 || year % 400 0){return 1;}else{return 0;} }int determine_year_month_day(int *day,int month,int year) {if(mo…
阅读更多...
【C++】构造函数、初始化列表，析构函数，拷贝构造函数，运算符重载

【C++】构造函数、初始化列表，析构函数，拷贝构造函数，运算符重载

注&#xff1a;本博客图片来源于学习笔记: 学习笔记https://gitee.com/box-he-he/learning-notes 完整思维导图请前往该博主码云下载。 目录 注&#xff1a;本博客图片来源于学习笔记: 学习笔记https://gitee.com/box-he-he/learning-notes 完整思维导图请前往该博主码云下载…
阅读更多...
带你实现用自己域名打开Tomcat

带你实现用自己域名打开Tomcat

文章目录 Tomcat1.1、Tomcat 下载1.2、Tomcat 文件图解1.3、 启动或关闭 Tomcat1.3.1、 启动1.3.2、 关闭程序2.1、 修改端口号2.2、修改主机名称Tomcat 1.1、Tomcat 下载 首先去Tomcat 官网下载找到我们需要下载的版本 1.2、To
阅读更多...
PKI - 02 对称与非对称密钥算法

PKI - 02 对称与非对称密钥算法

文章目录 概述对称密钥算法凯撒密码优点缺点 非对称密钥算法工作原理优点缺点 非对称密钥的的用途一&#xff1a; 一种简单而优雅的“混合加密”解决方案加密解密 非对称密钥的的用途二&#xff1a; 数字签名工作原理工作示意图 扩展 DSA vs RSA 概述 对称密钥算法和非对称密钥…
阅读更多...
jvm体系结构

jvm体系结构

一、Jvm 的介绍 1、JVM体系结构 2、JVM运行时数据区 3、JVM内存模型 JVM运行时内存 共享内存区 线程内存区 3.1、共享内存区 共享内存区 持久带(方法区 其他) 堆(Old Space Young Space(den S0 S1)) 持久代&#xff1a; JVM用持久带&#xff08;Permanent Space&…
阅读更多...
使用CICFlowMeter 实现对pcap文件的特征提取【教程】

使用CICFlowMeter 实现对pcap文件的特征提取【教程】

使用CICFlowMeter 实现对pcap文件的特征提取【教程】 针对现有的关于CICFlowMeter 的使用教程不够全面&#xff0c;一些细节没有展示&#xff0c;我将结合网络上的相关资料和实际的经历&#xff0c;提供一些经验和建议。 configuration information --------------- Windows…
阅读更多...
污水处理设备数据分析：潜在市场容量高达1000亿

污水处理设备数据分析：潜在市场容量高达1000亿

随着国家可再生能源激励政策和中长期发展规划的不断贯彻落实&#xff0c;一些大型能源投资公司、房地产开发商、装备制造龙头企业和物流运营商瞄准了污水处理设备产业的巨大潜在市场&#xff0c;纷纷加入到了污水处理设备建设的行列。我国污水处理设备行业发展重点已从农户自用…
阅读更多...
时间序列之趋势

时间序列之趋势

什么是趋势&#xff1f; 在时间序列中&#xff0c;趋势成分表示序列均值持续的、长期的变化。趋势是一个序列中移动最慢的部分&#xff0c;但却代表最重要的时间尺度。在产品销售的时间序列中&#xff0c;随着越来越多的人逐年了解该产品&#xff0c;市场扩张就可能会产生增长…
阅读更多...
JavaScript ATM取款机

JavaScript ATM取款机

①&#xff1a;循环的时候&#xff0c;需要反复提示输入框&#xff0c;所以提示框写到循环里面 ②&#xff1a;退出的条件是用户输入了 4&#xff0c;如果是4&#xff0c;则结束循环&#xff0c;不在弹窗 ③&#xff1a;提前准备一个金额预先存储一个数额 ④&#xff1a;取钱…
阅读更多...
【敏感词】敏感词检测功能v1.1.0版本正式上线

【敏感词】敏感词检测功能v1.1.0版本正式上线

背景 为了解决系统发布信息时人工审核成本高的问题&#xff0c;开发一个敏感词检测系统。该系统能够自动检测用户输入的内容中是否包含敏感词&#xff0c;从而减少不合规内容的发布&#xff0c;降低人工审核成本。通过实施这个系统&#xff0c;可以提高信息发布的效率和准确性…
阅读更多...
文献速递：肿瘤分割---- 优先注意网络，用于医学图像中多病变分割

文献速递：肿瘤分割---- 优先注意网络，用于医学图像中多病变分割

文献速递&#xff1a;肿瘤分割---- 优先注意网络&#xff0c;用于医学图像中多病变分割 Title 题目 Prior Attention Network for Multi-Lesion Segmentation in Medical Images 优先注意网络&#xff0c;用于医学图像中多病变分割 Abstract 摘要 —The accurate segmen…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站