HTMLCSS学习笔记（六）----表格表单及样式重置，特性

最新推荐文章于 2022-08-10 15:51:12 发布
最新推荐文章于 2022-08-10 15:51:12 发布
阅读量81 收藏 1
点赞数
原文链接：http://www.cnblogs.com/BBeyes/p/6581630.html
版权
  • 表格

 

<!DOCTYPE HTML>
<html>
<head>
<title>...</title>
</head>
<body>

 <table> <!-- 表格 -->
   <thead> <!-- 表格头部 -->
    <tr> <!-- 行 -->
      <th>表格标题</th>
      <th>表格标题</th>
      <th>表格标题</th>
    </tr>
   </thead>
 <tbody> <!-- 表格主体 -->
   <tr>
     <td>单元格</td>
     <td>单元格</td>
     <td>单元格</td>
   </tr>
   <tr>
     <td>单元格</td>
     <td>单元格</td>
     <td>单元格</td>
   </tr>
   <tr>
     <td>单元格</td>
     <td>单元格</td>
     <td>单元格</td>
   </tr>
 </tbody>
 <tfoot> <!-- 表格尾部 -->
   <tr>
     <td>单元格</td>
     <td>单元格</td>
     <td>单元格</td>
   </tr>
</ftoot> <!-- 表格尾部 -->
</table>

</body>
</html>

 

  table css reset：

 th，td｛padding：0；｝

 

 table｛ border-collapse: collapse；｝ 单元格属性合并

 

 注意事项：

 1，不要给table，th，td以外的表格标签加样式。

 2，table的标签基本特性是 display： table ；

 3，单元格默认平分table的宽度；

 4，th 里面的文字默认加粗并且左右上下居中显示；

 5，td里面的内容默认上下居中左右居左显示；

 6，table 决定了整个表格的宽度；

 7，table 里面的单元格宽度会被转换成百分比；

 8，表格里面的每一列必须有宽度；

 9，表格同一竖列继承最大宽度；

 10，表格同行继承最大高度；

 

 

  • 单元格合并

  <td colspan="3"></tdx>

 属性规定单元格可横跨的列数，被合并的列数去掉

 <td rowspan="3"></tdx>

 属性规定单元格可横跨的行数，被合并的列数去掉

 

 

  • 表单元素

 <form action="http://www.cnblog.com/" method="get" target="_blank">

 提交按钮：<input type="submit" value="提交OK"/ name="">

</form>

 </br></br>

 文本框 : <input type="text" name=""/>

</br></br>

密码框：<input type="password" name=""/>

 </br></br>

 单选按钮 ：

<label>

<input type=“radio” name="gender"/ >男

</label>

<label>

<input type=“radio” name="gender"/ >女

</label>

两者取同一个名字是或的关系

<br/><br/>

复选框：

<input type="checkbox" name=""disabled>逛街<!-- 禁止禁用 -->

<input type="checkbox" name="">健身

<input type="checkbox" name="">直排

<input type="checkbox" name="">美食

<input type="checkbox" name=checked/>旅游 <!-- 默认选中 -->

<br/><br/>

<hr/>

上传：<input type="file" name=""/>

<br/><br/>

图片：<input src="xxx.jpg" type="image" name=""/>

<br/><br/>

按钮：<input type="button" name""/>

<br/><br/>

 

重置：<input type="reset" name""/>

 

<br/><br/>

 

隐藏：<input type="hidden" name""/>

 

<br/><br/>

 

 

<hr/>

 <select>

 <option >1990</option>

 <option>1991</option>

 <option selected>1992</option> <!-- 默认显示 -->

 <option>1993</option>

 </select>

 <br></br>

文本域: <textarea></textarea>

 

 默认样式重置：

form｛margin：0；｝

input｛margin:0; padding:0;｝有默认两像素的边框

select｛margin：0；｝一般不控制高度

textarea｛margin:0;padding:0;｝

 

 

 

转载于:https://www.cnblogs.com/BBeyes/p/6581630.html

weixin_34166847
关注
前端学习之路-htm5+css3l笔记.doc
07-17
初始化CSS通常涉及重置或清除浏览器默认样式，以消除各浏览器之间的差异。例如，去除链接的下划线，改变鼠标悬停时的颜色（如粉红色），以及设置全局字体。此外，还有隐藏元素的方法，这在布局和动态内容显示时非常...
HTML5——CSS学习笔记（10）css重置样式
qianfeng_dashuju的博客
10-10 237
重置样式 @charset "utf-8"; html,body,ol,ul,li,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0;} body{font-size:16px;font-family: '微软雅黑';} ul,ol,li{list-style:none;} h1,h2,h3,h4,h5,h6{font-size:16px;font-weight: n
Html重新加载table数据,如何从HTML源刷新/重新加载我的DataTable
weixin_42131890的博客
06-04 1256
我正在寻找类似问题的答案。在我的项目中，表的内容已清除，并使用原始JavaScript进行了重写，并且DataTables库仅在项目的后面包含。这是在DataTables的isDataTable()-function的帮助下如何工作的精简版本。resultsTable开头是一个空标记，其内容在updateTable()函数中写入和更新。当通过异步请求获得Json数据时，将调用该函数。仅在以后才包含...
CSS-reset.css重置样式表 Normalize.css
alexwang的博客
08-10 899
CSS-reset.css重置样式表 Normalize.css
CSS——重置样式表
c0rdXy的博客
05-16 1329
通常情况，浏览器都会为元素设置一些默认样式 默认样式的存在会影响到页面的布局 通常情况下编写网页时必须要去除浏览器的默认样式（PC端） 重置样式表：专门用来对浏览器的样式进行重置的 reset.css直接去除了浏览器的默认样式 normalize.css对默认样式进行了统一 reset.css /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ ht
html表格重置标签,HTML——表格标签
weixin_35755434的博客
05-31 501
存在即是合理的。 表格的现在还是较为常用的一种标签，但不是用来布局，常见处理、显示表格式数据。表格的应用场景：1 创建表格在HTML网页中，要想创建表格，就需要使用表格相关的标签。创建表格的基本语法格式如下：单元格内的文字......在上面的语法中包含三对HTML标签，分别为 、、，他们是创建表格的基本标签，缺一不可，下面对他们进行具体地解释1.table用于定义一个表格。​2.tr 用于定义表格...
HTML_CSS学习笔记.docx
07-15
HTML 和 CSS 是构建网页内容和样式的两大核心技术。HTML（HyperText Markup Language）是一种标记语言，用于描述网页的结构和内容。CSS（Cascading Style Sheets）则负责控制网页的呈现样式，包括颜色、字体、布局等...
html经典学习笔记.zip
11-01
"HTML经典学习笔记"是一个压缩包文件，包含了深入理解和学习HTML的重要资料。这个压缩包可能包含了一系列的章节、实例和练习，旨在帮助学习者掌握HTML的基本语法、元素以及如何创建动态和交互式的网页。 在HTML的...
html+css+js总结笔记
06-25
### HTML+CSS+JS总结笔记 #### 一、HTML（超文本标记语言） HTML 是用于创建网页的标准标记语言。它由一系列元素组成，这些元素告诉浏览器如何显示内容。 ##### 1.1 框架与内容展示 - **`<pre>`**：预格式化文本...
HTML CSS Javascript经典笔记
10-25
CSS（Cascading Style Sheets）是用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的样式表语言。它的主要作用是美化网页的外观，进行页面排版，如设置字体、颜色、布局等。例如，你可以使用CSS来改变`...
html table 样式_element更改表格表头、行、指定单元格样式
weixin_39768695的博客
11-25 598
element更改表格表头、行、指定单元格样式在学习vue过程中，总结了一下使用element时更改表格样式的方式。更改表格的样式使用header-cell-style属性，可为函数或对象1. 函数写法<!-- html --><el-table :header-cell-style="rowClass"></el-table>2//在method里面写上方法r...
css美化表格和表单样式
IT_CREATE的博客
11-09 7263
Css美化表格和表单样式 表格创建默认是没有边框的，我们要用boder属性去设置表格的边框   表格基本样式 表格边框合并boder-collapse 在显示表格时,通常来说表格都是有边框的,边框的作用:主要用来界定不同的数据。当表格的border属性的值大于0的时候,边框才显示。当小于等于0,边框不会出现。当边框出现以后,我们可以采用border属性,以及border-collapse...
重置html表单样式的css合集
small fish鱼果果
12-25 356
最近做了一个表单很多的项目，常用的表单都用到了，但是，表单在Mac的Safari浏览器，以及iphone的自带浏览器上，还有Firefox浏览器表现出来的效果，总是差强人意，明明做了很多重置默认样式的工作，好像还是不太够，所以，项目结束后，赶紧总结下这些重置表单样式的css，以及其对应的场景。 1.先总结下常用的html表单元素 MDN官网关于input输入元素的介绍 项目中用到了 input type="text" input type="number" input type="password" in.
大学生职业生涯规划书Word模板范文就业求职简历应聘工作PPT医疗康复专业
最新发布
10-12
大学生职业生涯规划书Word模板范文就业求职简历应聘工作PPT医疗康复专业
基于Java的学生信息管理系统的实现与操作
10-12
本文介绍了一个Java实现的小型系统 -- 学生信息管理系统，包括学生数据的增删查改四个主要操作的功能演示，并具体讲解了涉及三个核心类（Student.java、StudentManager.java、StudentFrame.java）的设计思想以及代码逻辑。适合Java初学者用来了解面向对象的概念应用以及Swing工具包进行GUI创建的基础方法和步骤。系统通过提供文本框用于输入学生ID和其他必要信息，并提供按钮来执行对应指令，显示栏展示查询结果显示，使操作变得更为简洁直观有效。 适用于初步掌握Java基础的开发者，特别是想要加强自己对面向对象编码思维理解和运用的同学。 使用此管理系统可以在本地电脑环境上进行学生的数据维护工作（如增删改查），提高学校教务工作者处理信息的效率。 除了基本的数据录入和搜索之外，该项目也帮助理解如何设计合理的模型类并使用集合存储大量数据元素，另外还介绍了如何通过事件监听的方式绑定用户行为和应用程序之间的交互流程。
基于单片机控制的填块切割装置的设计_孟紫腾.pdf
10-12
基于单片机控制的填块切割装置的设计_孟紫腾
ImageNet-1K数据集索引和对应的中英文表单
10-12
ImageNet-1K数据集索引和对应的中英文表单
B站叫叫兽粉丝专属-YOLOv11改进免费送
10-12
B站叫叫兽粉丝专属-YOLOv11改进免费送 ！ YOLOv11全网最新创新点改进系列：免费送！！！改进且跑通的源码！！融入CBAM注意力，将通道注意力和空间注意力相结合，嘎嘎提升V11算法，叫叫首，改进速度遥遥领先，粉丝水文速度遥遥领先！！！ YOLOv11全网最新创新点改进系列：免费送！！！改进且跑通的源码！！通过增加检测层来提高对小目标特征信息的提取能力，旨在提升YOLOv11模型的小目标、密集型目标的检测精度！！！
HTML&CSS入门：结构、表格与表单详解
"Day04 HTML&CSS课堂笔记主要围绕Web前端开发的基础知识展开，包括HTML和CSS语言的结构和元素。在这一天的学习中，学员们复习了HTML的常用标签，如`<ul>`和`<ol>`用于创建无序和有序列表，`<dl>`, `<dt>`, 和 `<dd>`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值