0
0

第三章 表格布局与表单交互

3.1 表格概述

3.1.1 表格的结构

3.1.2 表格的基本语法

  1.     <table></table>表格标记
  3.     <caption></caption>表格标题标记
  5.     <th></th>表格表头标记
  7.     <tr></tr>表格的行标记
  9.     <td></td>表格的列标记
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.         <table>
  9.             <caption>23软件4班学生名单</caption>
  10.             <tr>
  11.                 <th>序号</th>
  12.                 <th>姓名</th>
  13.                 <th>性别</th>
  14.             </tr>
  15.             <tr>
  16.                 <td>1</td>
  17.                 <td>张三</td>
  18.                 <td>男</td>
  19.             </tr>
  20.             <tr>
  21.                 <td>2</td>
  22.                 <td>胡慧敏</td>
  23.                 <td>女</td>
  24.                 
  25.             </tr>

3.2 表格属性的设置

3.2.1 表格边框属性

  1.     border 表示表格边框粗细
  3.     bordercolorlight 表示表格亮边框颜色
  5.     bordercolor 表示表格边框颜色
  7.     bordercolordark 表示表格暗边形颜色
  1. <table border=" " bordercolor=" "  bordercolorlight=" " bordercolordark=" "> 
  3. </table>

3.2.2 表格的宽度和高度属性

  1.     width宽度 height 高度 可以设置长度单位或百分比，设置表格标记中的高度与宽度为百分比时，表格会跟随浏览器窗口的改变而自动调整。
  3.     设置宽高没办法放下内容时，宽生效 ，高不生效

3.2.3 表格背景颜色与表格图像属性

  1.     设置表格的bgcolor属性可以改变表格的背景颜色，设置表格的background属性可以为表格增添背景图像效果，使表格更加美观。

语法:
<table bgcolor="" background"">...
(1)bgcolor。可以用rgb 函数、十六进制、英文颜色名称来设置背景颜色。

  1.     (2)background。设置背景图像，图像的路径可以是绝对路径或相对路径。
  3.     (3)同时设置背景颜色和背景图像属性时，背景图像会部分或完全覆盖背景颜色。
  1. <table bground="" background="">
  3. </table>

3.2.4 表格边框样式属性

  1.            设置frame属性可以改变表格边框的样式；设置表格标记中的rules属性可以改变表格内部边框的样式。

语法：

  1. <table frame=""rules="">........内容......</table>

frame和rules属性值及说明如下：

  1. <table frame="" rules="">
  3. </table>

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

  1.             设置表格标记中的cellspacing属性可以改变单元格之间的间距。
  3.             设置表格标记中的cellpadding属性可以增加单元格之间的内容与内部边框的距离。
  5.             间距默认十个像素点。
  7.     语法：
  9.     <table cellspacing=""cellpadding=""</table>
  11.     （1）cellpadding。值的单位为像素或百分比。
  13.     （2）cellspacing。值的单位为像素或百分比，默认值为2px。
  1. <table cellspacing="" cellpadding="">
  3. </table>

3.2.6 表格水平对齐属性

  1.     通过设置align属性，设定对齐方式（居左，居右，居中）默认居左
  1. <table align="left/center/right">
  3. </table>

3.2.7 设置表格的（tr）标记行的属性

  1.     通过tr标记的align属性可以设置行内容的水平对齐方式
  3.     valign属性设置垂直对齐方式（顶部对齐，居中对齐，底部对齐）
  1. <table align="center">
  3. <tr align="left/center/right" valign="top/middle/bottom">
  5. <td>
  7. </td>
  9. </tr>
  11. </table>

3.2.8 设置单元格的属性

3.2.9 表格单元格跨行、跨列属性

3.2.9.1 单元格跨行

  1.     使用单元格td标记的rowspan属性可以设置单元格跨行合并。
  3.     语法：<td rowspan="行数">...</td>
  1. <td rowspan="行数">
  2. </td>

3.2.9.2 单元格跨列

  1.     使用单元格td标记的colspan属性可以设置单元格跨列合并。
  3.     语法：<tdcolspan="列数">...</td>
  5.     设置表格单元格合并例题
  1.     <!DOCTYPE html>
  2.     <html>
  3.         <head>
  4.             <meta charset="UTF-8">
  5.             <title>设置单元格跨列、跨行属性</title>
  6.         </head>
  7.         <body>
  8.             <h3 align="center">设置单元格跨列、跨行属性</h3>
  9.             <table border="1" width="500px" align="center" bordercolor="#3366ff">
  10.                 <caption>专业研讨会日程安排</caption>
  11.                 <tr align="center">
  12.                     <td colspan="2">上午</td>
  13.                     <td colspan="2">下午</td>
  14.                 </tr>
  15.                 <tr>
  16.                     <td>8:00-10:00</td>
  17.                     <td>10:10-12:00 </td>
  18.                     <td>14:00-16:00</td>
  19.                     <td>16;10-18:00</td>
  20.                 </tr>
  21.                 <tr align="center">
  22.                     <td rowspan="2">学校领导讲话</td>
  23.                     <td>大会主题报告</td>
  24.                     <td>行业企业专题报告</td>
  25.                     <td rowspan="2">总结报告</td>
  26.                 </tr>
  27.                 <tr align=" center">
  28.                     <td>专家报告</td>
  29.                     <td>分组讨论</td>
  30.                 </tr>
  31.                 <tr align="center">
  32.                     <td colspan="4">全天参观人工智能实训中心</td>
  33.                 </tr>
  34.             </table>
  35.         </body>
  36.     </html>

3.3 表格嵌套

  1.     表格嵌套是一种常用的页面布局方式（表格不宜多用，否则会减低网站的访问速度），表格嵌套一般采用单元格内嵌套表格。
  3.     利用嵌套表格布局页面
  2. <!DOCTYPE html>
  3. <html>
  4.     <head>
  5.         <meta charset="UTF-8">
  6.             <title>嵌套表格布局页面</title>
  7.         <style>
  8.             body{font-size:36px;}
  9.         </style>
  10.     </head>
  11.     <body>
  12.         <h4 align="center">嵌套表格布局页面</h4>
  13.         <table width="660px" border="1" align="center" bordercolor="#3333f">
  14.             <td height="100">
  15.                 <table width="100%" border="1" bordercolor="red">
  16.                     <tr height="50" align="center">
  17.                         <td rowspan ="2" width="100">logo</td>
  18.                         <td>广告条</td>
  19.                     </tr>
  20.                     <tr height="50"align="center">
  21.                     <td>导航</td>
  22.                     </tr>
  23.                 </table>
  24.             </td>
  25.             <tr>
  26.                 <td height="300">
  27.                     <table width="100%"border="I" bordercolar="#33f99">
  28.                         <tr align=" center">
  29.                             <td height="300" widih="30%">左栏目</td><td height="300" width="70%">正文内容</td>
  30.                         </tr>
  31.                     </table>
  32.                 </td>
  33.             </tr>
  34.             <tr align="center">
  35.                 <td height="100">版权信息</td>
  36.             </tr>
  37.         </table>
  38.     </body>
  39. </html>

3.4 表单

3.4.1 表单标记

  1.     <form>和<form>之间可包含各种表单信息输入标记

3.4.2 定义域和域标题

  1.     利用 feldset 标记可以在网页上定义域，在表单中使用域可以将表单的相关元素进行组，fieldser标记将表单内容的一部分打包，生成一组相关表单的字段。当一组表单元素成到fieldset 标记内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D效果，或者可创建一个子表单来处理这些元素。legend标记为fieldset 标记定义域标题。语法：
  1. <form><fieldset>
  3. <legend alig="left I center | right">城标题内容</legend>
  5. </fieldset>
  7. </form>
  1.     说明：fieldset 标记没有属性，是成对标记。legend 标记必须位于 fieldset标记内，也是

成对标记：有一个对齐 align 属性，属性值分别为left，center和right。

3.4.3 表单信息输入

3.4.3.1 单行文本输入框

  1.          设置input标记的type属性值为text，可以实现向表单中插入一个单行文本框。在单行文本框中可以输入任意类型的数据，但是输入的数据只能单行显示，不能换行。语法：
  1. <input name="" type="text" maxlength="" size="" value="" readonly/>
  1.        说明：单行文本输入框的主要属性有 name，maxlength,size,value和readonly
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.         <form>
  9.             用户名：<input type="text" name="user">
  10.         </form>
  11.     </body>
  12. </html>

3.4.3.2 密码输入框

  1.     设置input标记的type属性值为password，可以向表单中插入一个密码输入框。
  3.     语法：
  1. <input name=" "type="password"maxlength=" "size=" "/>
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.         <form>
  9.             用户名：<input type="text" name="user">
  10.                         密码：<input type="password" name="password">
  11.         </form>
  12.     </body>
  13. </html>

3.4.3.3 复选框

  1.     属性值为checkbox，向表单中插入一个复选框，使用复选框可以在网页中设置多项选择。
  3.     语法：
  1. <input name=" "type="checkbox"value=" "checked=" "/>
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.         <form>
  9.             用户名：<input type="text" name="user">
  10.                         
  11.                     密码：<input type="password" name="password">
  12.                     
  13.         </form>
  14.     </body>
  15.     <form></form>
  16.     姓名：<input type="text" name="name">
  17.     爱好：
  18.     <input type="checkbox" name="c1" value="sing" checked /> 唱歌
  19.     <input type="checkbox" name="c1" value="dance"/>跳舞
  20.     <input type="checkbox" name="c1" value="basketball"/>篮球
  21.     <input type="checkbox" name="c1" value="run"/>长跑
  22.     </form>
  23. </html>

3.4.3.4 单选按钮

  1.     属性值为radio，像表单中插入一个单选按钮，可以在网页中为某一选择设置多个但选项。
  3.     语法：
  1. <input name=" "type="radio"value=" "checked=" "/>
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.         <form>
  9.             用户名：<input type="text" name="user">
  10.                         
  11.                     密码：<input type="password" name="password">
  12.                     
  13.         </form>
  14.     </body>
  15.     <form></form>
  16.     姓名：<input type="text" name="name">
  17.     性别：<input type="radio" name="sex" value="male" checked />男性
  18.     性别：<input type="radio" name="sex" value="female"/>女性
  19.     <br/>
  20.     爱好：
  21.     <input type="checkbox" name="c1" value="sing" checked /> 唱歌
  22.     <input type="checkbox" name="c1" value="dance"/>跳舞
  23.     <input type="checkbox" name="c1" value="basketball"/>篮球
  24.     <input type="checkbox" name="c1" value="run"/>长跑
  25.     </form>
  26. </html>

3.4.3.5 图像按钮

  1.     属性值为image，可以实现向表单发送一个图像，通过src属性加载图像。
  3.     语法：
  1. <input name=" "type="image"src=" "width=" " height=""/>
  1. <form>
  2.         <input type="image" src="img/start.jpg"/>
  3.     </form>

3.4.3.6 提交按钮

  1.     属性值为submit，可以使用value修改按钮名称
  1. ​
  2. <form>
  3.             用户名：<input type="text" name="user">    
  4.             密码：<input type="password" name="password">
  5.             <br/>
  6.             <input type="submit" value="登录"
  7. </form>
  9. ​

3.4.3.7 重置按钮

  1.     属性值为reset,向表单中插入一个重置按钮，可以将信息清空，让用户重新填写。
  1. <input type="reset" />

3.4.3.8 普通按钮

  1.     属性值为button，按钮里面没有任何东西，可以使用value添加名称
  1. <input type="button" value="注册"/>

3.4.3.9 文件选择框

  1.     属性为file，可以实现向表单里面插入一个文件选择框。
  1. <form>
  2.         请上传材料<input type="file" />
  3.     </form>

3.4.3.10 隐藏框

  1.     属性为：hidden，不需要用户输入，但是可以使用vlaue把信息传给后端
  1. <form>
  2.         <input type="hidden" name="huiming" value="123"/>
  3.     </form>

3.4.4 多行文本输入框

  1.  textarea标记可以向表单中插入多行文本输入框。多行文本输入框可以用来输入较多的

文字信息，而且可以换行，并将这些信息提交到服务器。

  1. <form>
  2.         请输入您宝贵的意见：
  3.         <textarea rows="4" cols="30"></textarea>
  4.     </form>

3.4.5 下拉列表框

  1.     下拉列表可以在表单中接收用户的输入。下拉列表通常需要同时使用seleet和option标

记来在表单中插入下拉菜单和列表项。

语法：

  1. <select name="" size="" multiple>
  3. <option value=""selected>文字信息1</ option>
  5. <option value="">文字信息2</option>
  7. </select>
  1.  说明：select 标记是成对标记，option 标记是单个标记，但应该把它补成成对标记，结构更为清晰。select 标记有name，size 和multiple 等属性。option标记有value和selected等属性。select 标记与option标记必须配合使用。每一选项必须指定一个显示的文本和一个value值，显示文本通常附在option标记后面
  1.     <form>
  2.         请选择课程：
  3.         <select multiple>
  4.             <option value="">网页</option>
  5.             <option value="">ps</option>
  6.             <option value="">java</option>
  7.             <option value="">网络</option>
  8.         </select>
  9.     </form>

标签： css html 前端
本文转载自: https://blog.csdn.net/2302_80416946/article/details/142377664
版权归原作者 江恸 所有， 如有侵权，请联系我们删除。
登录后发布评论

“第三章 表格布局与表单交互”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航
3.1 表格概述