HTML <form>元素表示文档中的一个区域,此区域包含交互控件,用于向 Web 服务器提交信息。
默认是 块级元素
我们可以用 :valid 和 :invalid CSS伪类来设置 <form> 元素的样式,此时样式的表现取决于表单中的 elements 是否有效。
运行结果:
<fieldset>标签用于对表单中的控制元素进行分组(也包括 label 元素)。
fieldset标签默认是块级标签(display: block)
fieldset中的<legend>元素会放在块级起始处的边界上。
一个匿名框包围fieldset中的内容,这个匿名块继承了fieldset的一些属性,如display属性。
注意事项
1、fieldset的标题有第一个<legend>子元素确定。
2、disable属性将会继承到子代的表单控件元素上,但是<legend>标签中的表单控件元素不会继承。
3、在不同的fieldset中的同名的type=radio中,也只会选择一个。
用于表示其父元素 <fieldset>的内容标题。
注意事项
1、legend标签中不仅可以存放普通的字符,还可以添加表单控件元素。
案例
运行结果:
表格在数据展示方面非常简单,并且表现优秀,通过与CSS的结合,可以让数据变得更加美观和整齐。
行、列、单元格单元格特点:同行等高、同列等宽。
表格的基本语法:
创建一个3行3列的表格:
单元格中内容的填充间距通过cellpadding(默认1px)属性来设置;
单元格与单元格之间的间距通过cellspacing(默认1px)属性来设置。
设置单元格的填充间距为10,单元格之间的间距为0,红色边框
一般表格的第一行是标题,并且是文本居中、加粗,将td换成th。
而某些数据需要居中,但不希望加粗,可以给td添加align="center"
表格的跨行跨列
有时,表格的结构并没有那么简单,可能会存在跨行和跨列的情况:
跨行:
跨列:
跨行、跨列并存:
这个问题看似很复杂,其实很简单,在制作跨行和跨列的表格时,只需按照如下步骤就可以轻松搞定!:
首先做一个完整的表格:注意虚线部分,最终去掉这些虚线就是我们要的效果
找出最左上角那个“侵占”其他单元格的单元格,如下图标注数字的位置
观察这个单元格“侵占”的是行还是列,算上自己总共是几个?(行数用r表示,列数用c表示):
如果是行:在这个单元格上添加rowspan="r"
如果是列:在这个单元格上添加colspan="c"
如果既有行又有列:在这个单元格上添加rowspan="r" colspan="c"
把“被侵占”的单元格删掉,删除顺序:从右向左,从上至下,否则很容易出错!
按以上步骤完成一个跨行跨列的表格:
每天持续更新,点点关注不迷路哦~
HTML中的表格由 <table>标签来定义,表格是由单元格组成的,单元格可以放入文字、图片、表格等内容。下面,我们来看看如何用HTML来制作表格吧。
代码,先用<table>标签定义一个表格,其中border表示边框,border="1"表示边框为1个像素,数值越大,边框就越粗。<table border="1">
</table>
<tr>元素表示表格中的行,比如创建两行<tr></tr>表示一行。
单元格HTML表格的单元格用<td>标签表示,如下图所示:
<td>语文</td>
表格就做好一个HTML表格,显示图如下:
总代码:
<body>
<table border="1">
<tr>
<td>语文</td>
<td>数学</td>
</tr>
<tr>
<td>英语</td>
<td>化学</td>
</tr>
特别提示表格的标签:<table>、<tr>、<td>三个标签。