表格、列表和表单

表格

表格由<table>定义,由若干行组成，表格的由<tr>定义，一行由若干单元格组成，单元格由<td>定义。为突出第一行的重要性，第一行的单元格也常由表头标签<th>定义。

作用

表格通常用于展示二元数据，而不是用于页面布局，它可以让数据显示的非常的规整，可读性很好。使用表格可以简单的将复杂的数据清晰的表现出来，比使用div布局要方便得多。

样例

代码：

<table border="1" cellpadding="10">
<thead>
<tr>
<th>商品名</th>
<th>库存量</th>
</tr>
</thead>
<tbody>
<tr>
<td>笔记本电脑</td>
<td>30（台）</td>
</tr>
<tr>
<td>鼠标垫</td>
<td>10（箱）</td>
</tr>
</tbody>
</table>

效果：

解析：

table用于定义一个表格标签，thead用于组合表头元素，tbody用于组合表格的主体，tr标用于定义表格中的行，td 用于定义表格中的单元格，并在单元格中展示数据，事实上字母 td 指的就是表格数据（table data）。
嵌套关系为table>thead/tbody>tr>th/td
th/td必须被嵌套在tr中，tr必须由th/td组成，tr可以被嵌套在thead和tbody中也可以直接被嵌套在table中(不使用thead和tbody时)
th 也是一个单元格 只不过和普通的 td单元格不一样，它会让自己里面的文字居中且加粗。

注意：表格没有列的标签

表格常用属性

表格有两个属性比较常用—— border、cellspacing 和 cellpadding。
border为边框线条的粗细
cellspacing为表格的单元格边框之间间距
cellpadding为单元格内数据和边框的距离

表格标题caption

caption 元素定义表格标题，通常这个标题会被居中且显示于表格之上。caption 标签必须紧随 table 标签之后。这个标签只存在 表格里面才有意义。

<table>
<caption>商品库存量</caption>
<thead>
<tr>
<th>商品名</th>
<th>库存量</th>
</tr>
</thead>
<tbody>
<tr>
<td>笔记本电脑</td>
<td>30（台）</td>
</tr>
<tr>
<td>鼠标垫</td>
<td>10（箱）</td>
</tr>
</tbody>
</table>

合并单元格

• 跨行合并：rowspan=“合并单元格的个数” ，向下合并，写在最上侧单元格里
• 跨列合并：colspan=“合并单元格的个数”，向右合并，写在最左侧单元格里

样例

<table border="1">
<tr>
<th colspan="3">物资详情说明</th>
</tr>
<tr>
<td colspan="2" align="center">数量(支)</td>
<td rowspan="2">重量(吨)</td>
</tr>
<tr>
<td>实发数</td>
<td>实收数</td>
</tr>
<tr>
<td>12</td>
<td>10</td>
<td>100.00</td>
</tr>
</table>

列表

如果说表格是用于数据展示的，那么列表就是用来布局的。 适合用于规则排列的布局，列表的<li>中可以嵌套各种其他标签

无序列表<ul>

无序列表的各个列表项之间没有顺序级别之分，是并列的。其基本语法格式如下：

<ul>
<li>苹果</li>
<li>梨子</li>
<li>桃</li>
</ul>

• 苹果
• 梨子
• 桃

<ul></ul>中只能嵌套<li></li>，不能放其他元素和文字。<li></li>相当于一个容器，可以容纳所有元素。
无序列表每一行前的点是它自带的样式属性，一般通过css更改。

2. 有序列表 ol （了解）

有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义，有序列表的基本语法格式如下：

<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>

1. 列表项1
2. 列表项2
3. 列表项3

除了有序号和ul没有什么区别，但是实际运用中比无序列表用的少很多。

自定义列表<dl>

当列表的某一行要突出于其他行、其他行是对这一行的解释或是其分支时，一半要用到自定义列表。其基本语法如下：

<dl>
<dt>联系我们</dt>
<dd>qq</dd>
<dd>微信</dd>
<dd>电话</dd>
<dd>邮箱</dd>
</dl>

联系我们

qq

微信

电话

邮箱

dl中只能包含dd和dt，dt和dd没有数量限制，一般是一对多

表单

表单标签<form>用于定义表单域，收集用户信息，提交到后台。

表单域中常嵌套有表单控件用于实现收集用户数据的功能。

表单域

<form action="url地址" method="提交方式" name="表单名称">
<!--各种表单控件-->
</form>

常用属性：

注意:

每个表单都应该有自己表单域以提交用户在控件内填写的所有数据。

表单控件

​ 包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。

input标签

大部分表单控件由input标签构成，用于输入，是单标签行内元素，具有type属性用于指定控件类型，value属性用于指定默认值。
语法：<input type="属性值" value="默认值"/>

1. type 属性
   这个属性通过改变值，可以决定了你属于那种input表单。
   type = ‘text’ 就表示文本框，可以做 用户名， 昵称等。
   type = ‘password’ 就是表示密码框，内容是不可见的。
   "radio"表示单选框，用相同的name或ID形成一组，一组只能选一个，value表示被选择后准备递交的值。
   "vehicle"表示多选框，用相同的name或ID形成一组，value表示被选择后准备递交的值。
   submit是一个提交按钮，可以提交表单域内的数据

<form name="input" action="html_form_action.php" method="get">
<input type="text" value="kehu"/> <br/>
<input type="password" value="123"/><br/>
<input type="radio" name="sex" value="male">Male<br/>
<input type="radio" name="sex" value="female">Female<br/>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br/>
<input type="checkbox" name="vehicle" value="Car">I have a car<br/>
<input type="submit" value="Submit">
</form>

2. value属性值
   value一般表示默认的文本值。 有些表单想刚打开页面就默认显示几个文字，就可以通过这个value 来设置。对于单选和多选框，value表示只表示对于选项的属性值，不会显示什么。

用户名:<input type="text"
name="username" value="请输入用户名">

3. name属性
   name是表单元素的名字，后台可以通过这个name属性找到这个表单元素。 页面中的表单很多，name主要作用就是用于区别不同的表单。
   给一组radio命名相同的名字就可以只选其中的一个了。

用户名:<input type="text"
name=“username” />

4. checked属性
   表示默认选中状态。 用单选按钮和复选按钮。

<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" />女
<!--默认选男-->

5. input 属性小结
   属性 说明 作用
   type 表单类型 用来指定不同的控件类型
   value 表单值 表单里面默认显示的文本
   name 表单名字 页面中的表单很多，name主要作用就是用于区别不同的表单。
   checked 默认选中 表示那个单选或者复选按钮一开始就被选中了

label标签

label标签用于标注input元素，当你点击点击label标签的时候, 被绑定的表单元素就可以开始输入了，可以提高用户体验。

第一种用法：

<label> 用户名： <input type="radio" name="usename" value="请输入用户名">
</label>

适合单个表单选择

第二种用法:

<label for="sex">男</label>
<input type="radio" name="sex"
id="sex">

textarea控件(文本域)

语法：

<textarea >
文本内容
</textarea>

作用：通过textarea控件可以轻松地创建多行文本输入框.

属性：cols=“每行中的字符数” rows=“显示的行数”

文本框和文本域区别：
input type=“text”是文本框，只能显示一行文本，为单标签，通过value显示默认值，常用于用户名、昵称、密码等；
textarea是文本域，可以显示多行文本，为双标签，默认值写到标签中间，常用于填写意见反馈等。

select下拉列表

如果有多个选项让用户选择，为了节约空间，可以使用select控件定义下拉列表.

<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
</select>

注意：
中至少包含一对 option
在option 中定义selected =" selected "时，当前项即为默认选中项。

最后

以上就是包容棒球为你收集整理的表格、列表和表单表格、列表和表单的全部内容，希望文章能够帮你解决表格、列表和表单表格、列表和表单所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。