一、表格

 在现实生活中，经常要表格来表示格式化的数据课程表，人名单。。。通过table标签来创建表格<table border="1" width='50%' align="center"> <!-- 在table中使用tr表示表格中一行，有几个tr就有几行--><tr><!-- 在tr中需要td，一个td表示一个单元格,有几个td就有几个单元格--><td>A1</td><td>A2</td><td>A3</td></tr><tr><td>B1</td><!-- colspan 表示横向合并单元格。rowspan 表示纵向合并单元格。--><td colspan="2">B2</td></tr></table>

长表格

    可以将一个表格分成三个部分头部 thead主体 tbody底部 tfootth表示头部单元格<table border="1" width='50%' align="center"><thead><tr><th>日期</th><th>收入</th><th>支出</th><th>合计</th></tr></thead><tbody><tr><td>2001.1.1</td><td>500</td><td>200</td><td>300</td></tr><tr><td>2001.1.1</td><td>500</td><td>200</td><td>300</td></tr><tr><td>2001.1.1</td><td>500</td><td>200</td><td>300</td></tr><tr><td>2001.1.1</td><td>500</td><td>200</td><td>300</td></tr></tbody><tfoot><tr><td></td><td></td><td>合计</td><td>300</td></tr></tfoot>
</table>

表格的样式

  table{margin: 0 auto;width: 50%;border: 1px solid black;/* border-spacing表示边框之间的距离*//* boder-collapse：collapse 设置边框的合并*//* border-spacing: 0px; */border-collapse: collapse;}td{border: 1px solid black;height: 100px;/* 默认情况下元素在td中是垂直居中的 可以通过vertical-align来修改*/vertical-align: top;}/* 如果表格中没有使用tbody而是直接使用tr那么浏览器会自动创建一个tbody，并且将tr全部放到tbody里tr不是table的子元素，所以用table > tr无法选中tr*/tr:nth-child(2n){background-color: #bfa;}.box1{width: 300px;height: 300px;background-color: orange;/* 想元素设置为单元格td */display: table-cell;vertical-align: middle;}

二、表单

    表单在现实生活中用于提交数据在网页中也可以使用表单，网页中的表单用于将本地数据提交给远程服务器使用form标签来创建表单<!-- form中必须要有的属性action指定表单要提交的服务器的地址-->
<form action="target.html"><!-- 添加表单项：文本框数据提交到服务器中，必须指定一个name值-->文本框 <input type="text" name="username"><br><br><!-- 密码框 -->密码框<input type="password" name="password"><br><br><!-- 单选按钮必须有相同的name属性才能选一个还必须指定一个value属性 会作为最终用户填写的值checked 可以将单选按钮设置为默认选中-->单选按钮<input type="radio" name="hello" value="a"><input type="radio" name="hello" value="b" checked><br><br><!-- 多选框和单选框差不多--><input type="checkbox" name="test" value="1"><input type="checkbox" name="test" value="2"><input type="checkbox" name="test" value="3"><br><br><!-- 下拉列表select里必须有option才有选项--><select name="haha"><option value="i">选项1</option><option value="ii">选项2</option><option value="iii">选项3</option></select><br><br><!-- 提交按钮value指定内容 --><input type="submit" value="登录">
</form>

表单补充

  <form action="target.html"><input type="text" name="username" value="hello"><br><br><!-- 关闭自动补全 autocomplete="off"--><input type="text" name="a" autocomplete="off"><br><br><!-- readonly 将表单项设置为只读（数据会提交）disable 将表单项设置为禁用（数据不会提交）autofocus 表单自动获取焦点--><input type="text" name="b" value="hello" readonly><br><br><input type="submit" ><!-- 选择颜色 --><input type="color"><!-- 普通的按钮 --><input type="button" value="按钮" ><!-- 重置按钮表单值改为默认按钮--><input type="reset" ><br><br><!-- 电子邮件会提示输入格式是否正确--><input type="email"><!-- 与上边不同的是下边的按钮标签是成对的 --><button type="submit">提交</button><button type="reset">重置</button><button type="button">按钮</button></form>

CSS表格和表单的样式相关推荐

CSS——表格与表单的简介
文章目录前言一.什么是表格? 二.什么是表单 1.表单中的常用项与介绍 2.补充点总结前言本文主要介绍了html中表格与表单的相关知识点一.什么是表格? 表格的应用在日常生活中十分的常见, ...
CSS — 表格和表单
目录一.表格 1.表格介绍 2.长表格 3.表格的样式二.表单一.表格 1.表格介绍在现实生活中,我们经常使用表格来表示一些格式化的数据,如课程表,人名单等等. 同样,在网页中也需要使用表格, ...
CSS表格和表单设置
表格: 再HTML中使用table标签来创建一个表格:在table标签中使用tr标签来表示表格中的一行:在tr标签中使用td来常见一个单元格.可以用th标签来表示表头(自动加粗和居中):th的用法 ...
表格应用css样式,对表格与表单应用CSS样式.ppt
<对表格与表单应用CSS样式.ppt>由会员分享,可在线阅读,更多相关<对表格与表单应用CSS样式.ppt(12页珍藏版)>请在人人文库网上搜索. 1.第十章,HTML与CSS ...
精通CSS.DIV网页样式与布局（五） ——设置表格与表单样式
原文地址为: 精通CSS.DIV网页样式与布局(五) --设置表格与表单样式表格和表单是网页中非常重要的两个元素,我们这次来说说CSS如何设置表格和表单样式.我们先来看看CSS如何控制表格. 首先表 ...
css美化表格和表单样式
Css美化表格和表单样式表格创建默认是没有边框的,我们要用boder属性去设置表格的边框表格基本样式表格边框合并boder-collapse 在显示表格时,通常来说表格都是有边框的,边框的作用: ...
【重识 HTML + CSS】列表、表格、表单
HTML 元素列表有序列表 ol.li 无序列表 ul.li 定义列表 dl.dt.dd 列表相关的 CSS 属性 list-style 练习表格 table 的常用属性 tr 的常用属性 th ...
WEB前端 ---- 学习第二天(表格、表单、css等)
今日内容概要表格标签(只要是展视数据一般都可以使用表格标签) 表单标签(重要:获取前端用户数据发送给后端) 后端框架基本使用(flask) css层叠样式表(选择器) 表格标签数据示例: use ...
HTML 表格、表单和CSS初识
表格.表单和CSS初识一.提问 html骨架结构是什么常用标签有哪些图像标签有哪些属性,绝对路径和相对路径的区别链接标签有哪些属性,说出各个属性的作用列表标签分几种,分别是什么二.本章任务 ...
CSS特效（1）——css伪类实现表单验证样式
css伪类实现表单验证样式 <!DOCTYPE html> <html lang="en"> <head><meta charset=&q ...

CSS表格和表单的样式

一、表格

二、表单

CSS表格和表单的样式相关推荐

最新文章

热门文章