HTML-table表格&form表单详解

本文介绍: table 表格&form 表单(表格的行和列、横纵合并、边距边框、表头表体表底标签，表单元素的列表和分组、input各种输入框、单多选、提交和重置，button 按钮)

表格

表格的说明(创建 一个 表格)

&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8" /&gt;
    &lt;title&gt;</title>
  </head>
  <body>
    <table border="1" width="40%" align="center">
      <tr>
        <td>A1</td>
        <td>A2</td>
        <td>A3</td>
        <td>A4</td>
      </tr>
      <tr>
        <td>B1</td>
        <td>B2</td>
        <td>B3</td>
        <td rowspan="2">B4</td>
      </tr>
      <tr>
        <td>C1</td>
        <td>C2</td>
        <td>C3</td>
      </tr>
      <tr>
        <td>D1</td>
        <td>D2</td>
        <td colspan="2">D3</td>
      </tr>
    </table>
  </body>
</html>

请添加图片描述

1. 说明

表格在日常生活中使用非常多，比如 excel 就是专门用来创建表格的工具，
- 表格就是由用来表示一些格式化的数据的，比如：额课程表，银行对账单
在网页中也可以创建出不同的表格。

2. 设置

在 HTML 中，使用 table 标签来创建一个表格

<table border="1" width="40%" align="center"></table>

在 table 中使用 tr 来表示表格中的一行，有几行就有几个 tr
- 在 tr 中需要使用 td 来创建一个单元格，有几个单元格就有几个 td

<tr>
  <td>A1</td>
  <td>A2</td>
  <td>A3</td>
</tr>

<tr>
  <td>B1</td>
  <td>B2</td>
  <td>B3</td>
</tr>

<tr>
  <td>C1</td>
  <td>C2</td>
  <td>C3</td>
</tr>

<tr>
  <td>D1</td>
  <td>D2</td>
  <td>D3</td>
</tr>

row span 用来设置的纵向的合并单元格

<td rowspan="2">B4</td>

colspan 横向的合并单元格

<td colspan="2">D3</td>

表头和表格边框样式 设置

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
      table {
        width: 300px;
        /*居中*/
        margin: 0 auto;
        /*边框*/
        /* border: 1px solid black; */

        border-collapse: collapse;
        /*设置背景颜色*/
        /* background-color: #bfa; */
      }

      /*
       * 设置边框
       */
      td,
      th {
        border: 1px solid black;
      }

    /*
     * 设置隔行变色
     */
      tbody > tr:nth-child(even) {
        background-color: #bfa;
      }

    /*
     * 鼠标移入到tr以后，改变颜色
     */
      tr:hover {
        background-color: #ff0;
      }
    </style>
  </head>
  <body>
      <!-- 
      table是一个块元素
      -->
    <table>
      <tr>
      <!-- 
      可以使用th标签来表示表头中的内容，
      	它的用法和td一样，不同的是它会有一些默认效果
      -->
        <th>学号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>住址</th>
      </tr>

      <tr>
        <td>1</td>
        <td>孙悟空</td>
        <td>男</td>
        <td>花果山</td>
      </tr>

      <tr>
        <td>2</td>
        <td>猪八戒</td>
        <td>男</td>
        <td>高老庄</td>
      </tr>

      <tr>
        <td>3</td>
        <td>沙和尚</td>
        <td>男</td>
        <td>流沙河</td>
      </tr>

      <tr>
        <td>4</td>
        <td>唐僧</td>
        <td>男</td>
        <td>女儿国</td>
      </tr>

      <tr>
        <td>1</td>
        <td>孙悟空</td>
        <td>男</td>
        <td>花果山</td>
      </tr>

      <tr>
        <td>2</td>
        <td>猪八戒</td>
        <td>男</td>
        <td>高老庄</td>
      </tr>

      <tr>
        <td>3</td>
        <td>沙和尚</td>
        <td>男</td>
        <td>流沙河</td>
      </tr>

      <tr>
        <td>4</td>
        <td>唐僧</td>
        <td>男</td>
        <td>女儿国</td>
      </tr>

      <tr>
        <td>1</td>
        <td>孙悟空</td>
        <td>男</td>
        <td>花果山</td>
      </tr>

      <tr>
        <td>2</td>
        <td>猪八戒</td>
        <td>男</td>
        <td>高老庄</td>
      </tr>

      <tr>
        <td>3</td>
        <td>沙和尚</td>
        <td>男</td>
        <td>流沙河</td>
      </tr>

      <tr>
        <td>4</td>
        <td>唐僧</td>
        <td>男</td>
        <td>女儿国</td>
      </tr>

      <tr>
        <td>1</td>
        <td>孙悟空</td>
        <td>男</td>
        <td>花果山</td>
      </tr>

      <tr>
        <td>2</td>
        <td>猪八戒</td>
        <td>男</td>
        <td>高老庄</td>
      </tr>

      <tr>
        <td>3</td>
        <td>沙和尚</td>
        <td>男</td>
        <td>流沙河</td>
      </tr>

      <tr>
        <td>4</td>
        <td>唐僧</td>
        <td>男</td>
        <td>女儿国</td>
      </tr>

      <tr>
        <td>2</td>
        <td>猪八戒</td>
        <td>男</td>
        <td>高老庄</td>
      </tr>

      <tr>
        <td>3</td>
        <td>沙和尚</td>
        <td>男</td>
        <td>流沙河</td>
      </tr>

      <tr>
        <td>4</td>
        <td>唐僧</td>
        <td>男</td>
        <td>女儿国</td>
      </tr>

      <tr>
        <td>2</td>
        <td>猪八戒</td>
        <td>男</td>
        <td>高老庄</td>
      </tr>

      <tr>
        <td>3</td>
        <td>沙和尚</td>
        <td>男</td>
        <td>流沙河</td>
      </tr>

      <tr>
        <td>4</td>
        <td>唐僧</td>
        <td>男</td>
        <td>女儿国</td>
      </tr>
    </table>
  </body>
</html>

web 前端–html-表格-表格边框样式设置

1. 设置

border–spacing
- table 和 td 边框之间默认有一个距离
- 通过 border–s p ac ing 属性可以设置这个距离

border-spacing: 0px;

border–collapse
- 可以用来设置表格的边框合并
- 如果设置了边框合并，则 border–s p ac ing 自动失效

border-collapse: collapse;

可以使用 th 标签来表示表头中的内容，
- 它的用法和 td 一样，不同的是它会有一些默认效果

长表格结构和补充

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>日期</th>
          <th>收入</th>
          <th>支出</th>
          <th>合计</th>
        </tr>
      </thead>

      <tfoot>
        <tr>
          <td></td>
          <td></td>
          <td>合计</td>
          <td>100</td>
        </tr>
      </tfoot>

      <tbody>
        <tr>
          <td>10.24</td>
          <td>500</td>
          <td>300</td>
          <td>200</td>
        </tr>
        <tr>
          <td>10.24</td>
          <td>500</td>
          <td>300</td>
          <td>200</td>
        </tr>
        <tr>
          <td>10.24</td>
          <td>500</td>
          <td>300</td>
          <td>200</td>
        </tr>
        <tr>
          <td>10.24</td>
          <td>500</td>
          <td>300</td>
          <td>200</td>
        </tr>
        <tr>
          <td>10.24</td>
          <td>500</td>
          <td>300</td>
          <td>200</td>
        </tr>
        <tr>
          <td>10.24</td>
          <td>500</td>
          <td>300</td>
          <td>200</td>
        </tr>
        <tr>
          <td>10.24</td>
          <td>500</td>
          <td>300</td>
          <td>200</td>
        </tr>
        <tr>
          <td>10.24</td>
          <td>500</td>
          <td>300</td>
          <td>200</td>
        </tr>
        <tr>
          <td>10.24</td>
          <td>500</td>
          <td>300</td>
          <td>200</td>
        </tr>
        <tr>
          <td>10.24</td>
          <td>500</td>
          <td>300</td>
          <td>200</td>
        </tr>
        <tr>
          <td>10.24</td>
          <td>500</td>
          <td>300</td>
          <td>200</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

请添加图片描述

1. 说明

有一些情况下表格是非常的长的
这时就需要将表格分为三个部分，表头，表格的主体，表格的底部

2. 结构

在 HTML 中为我们提供了三个标签:
- thead 表头永远会显示在表格的头部
- tbody 表格主体永远都会显示表格的中间
- tfoot 表格底部永远都会显示表格的底部
这三个标签的作用，就来区分表格的不同的部分，他们都是 table 的子标签
- 都需要直接写到 table 中,tr 需要写在这些标签当中

3. 补充

如果表格中没有写 tbody，浏览器会自动在表格中添加 tbody
- 并且将所有的 tr 都放到 tb ody 中,所以注意 tr 并不是 table 的子元素，而是 tbody 的子元素
通过 table > tr 无法选中行，需要通过 tbody > tr

表格布局(被淘汰)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <table border="1" width="100%">
      <tr height="100px">
        <td colspan="2"></td>
      </tr>
      <tr height="400px">
        <td width="20%"></td>
        <td width="80%">
          <table border="1" width="100%" height="100%">
            <tr>
              <td></td>
            </tr>
            <tr>
              <td></td>
            </tr>
          </table>
        </td>
      </tr>
      <tr height="100px">
        <td colspan="2"></td>
      </tr>
    </table>
  </body>
</html>

请添加图片描述

1. 表格布局(已经被 CSS 淘汰)

以前表格更多的情况实际是用来对页面进行布局的，但是这种方式早已经被 CSS 所淘汰了
- 表格的列数由 td 最多的那行决定
表格是可以嵌套的，可以在 td 中再放置一个表格

表单

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <form action="target.html">
      <fieldset>
        <legend>用户信息</legend>
        <label for="um">用户名</label>
        <input id="um" type="text" name="username" /> <br />
        <br />
        <label for="pwd">密码</label>
        密码<input id="pwd" type="password" name="password" /> <br />
        <br />
      </fieldset>
      <fieldset>
        <legend>用户爱好</legend>
        性别<input type="radio" name="gender" value="male" id="male" /><label
          for="male"
          >男</label
        >
        <input
          type="radio"
          name="gender"
          value="female"
          checked="checked"
          id="female"
        />
        <label for="female">女</label> <br />
        <br />
        爱好 <input type="checkbox" name="hobby" value="zq" />足球
        <input type="checkbox" name="hobby" value="lq" />篮球
        <input
          type="checkbox"
          name="hobby"
          value="zmq"
          checked="checked"
        />羽毛球
        <input
          type="checkbox"
          name="hobby"
          value="ppq"
          checked="checked"
        />乒乓球 <br />
        <br />
      </fieldset>
      你喜欢的明星
      <select name="star">
        <optgroup label="女明星">
          <option value="fbb">范冰冰</option>
          <option value="lxr">林心如</option>
          <option value="zw">赵薇</option>
        </optgroup>

        <optgroup label="男明星">
          <option value="lxr">林心如</option>
          <option value="zbs" selected="selected">赵本山</option>
          <option value="ldh">刘德华</option>
          <option value="pcj">潘长江</option>
        </optgroup>
      </select>
      <br />
      <br />

      自我介绍<textarea name="info"></textarea>

      <br />
      <br />
      <input type="submit" value="注册" />
      <input type="reset" />
      <input type="button" value="按钮" />
      <br />
      <br />
      <button type="submit">提交</button>
      <button type="reset">重置</button>
      <button type="button">按钮</button>
    </form>
  </body>
</html>

web 前端–html–css-form 表单

1. 表单的作用

表单的作用就是用来将用户信息提交给远程服务器的
比如：
- 百度的搜索框
- 注册登录这些操作都需要填写表单

2. 创建一个表单

<form action="target.html"></form>

使用 form 标签来创建一个表单
form 标签中必须制定一个 action 属性，该属性指向的是一个服务器的地址
- 当我们提交表单时将会提交到 action 属性对应的地址
使用 form 创建的仅仅是一个空白的表单，
- 我们还需要向 from 中添加不同的表单项

3. 表单的各个标签(表单项)

1) fieldset 分组

在表单中可以使用 fieldset 来为表单项进行分组，
可以将表单项中的同一组放到 fieldset 中

<fieldset></fieldset>

2) legend 组名

在 fieldset 中可以使用 legend 子标签，来指定组名

<legend>用户信息</legend>

3) label 提示 文字

在 html 中为我们提供了一个标签，专门用来选中表单中的提示文字的 label 标签
该标签可以指定一个 for 属性，该属性的值需要指定一个表单项的 id 值

<label for="um">用户名</label> <input id="um" type="text" name="username" />

4) input 文本框

使用 input 来创建一个文本框，它的 type 属性是 text
如果希望表单项中的数据会提交到服务器当中，还必须给表单项指定一个 name 属性 – name 表示提交内容的名字

<input id="um" type="text" name="username" />

①密码框

使用 input 创建一个密码框，它的 input 属性值是 password

<input id="pwd" type="password" name="password" />

②单选按钮

使用 input 来创建单选按钮,它的 type 属性使用 radio
单选按钮通过 name 属性进行分组，name 属性相同的是一组按钮
像这种需要用户选择但是不需要用户直接填写内容的表单项， – 还必须指定一个 value 属性，这样被选中的表单项的 value 属性值将会最终被提交给服务器
如果需要单选按钮或者多选框中指定默认选中的选项， – 则可以在希望选中的属性中添加 chec ked=”chec ked”属性

性别<input type="radio" name="gender" value="male" id="male" /><label for="male"
  >男</label
>
<input
  type="radio"
  name="gender"
  value="female"
  checked="checked"
  id="female"
/>
<label for="female">女</label>

③多选框

使用 input 创建一个多选框，它的 type 属性使用 check box

爱好 <input type="checkbox" name="hobby" value="zq" />足球
<input type="checkbox" name="hobby" value="lq" />篮球
<input type="checkbox" name="hobby" value="zmq" checked="checked" />羽毛球
<input type="checkbox" name="hobby" value="ppq" checked="checked" />乒乓球

5) select 下拉 列表

下拉列表的 name 属性需要指定给 select，而 value 属性需要指定给 option
可以通过在 option 中添加 selected=”selected”来将选项设置为默认选中
当为 select 添加一个 multiple=“multiple”，则下拉列表变为一个多选的下拉列表

你喜欢的明星
<select name="star"></select>

6) optgroup 选项分组

在 select 中可以使用 optgroup 对选项进行分组 – 同一个 optgroup 中的选项是一组
可以通过 label 属性来指定分组的名字

<optgroup label="女明星">
  <option value="fbb">范冰冰</option>
  <option value="lxr">林心如</option>
  <option value="zw">赵薇</option>
</optgroup>

<optgroup label="男明星">
  <option value="zbs" selected="selected">赵本山</option>
  <option value="ldh">刘德华</option>
  <option value="pcj">潘长江</option>
</optgroup>

7) option 下拉 列表项

在下拉列表中使用 option 标签来创建一个一个列表项

<option value="fbb">范冰冰</option>
<option value="lxr">林心如</option>
<option value="zw">赵薇</option>

8) textarea 文本域

使用 text area 创建一个文本域

自我介绍<textarea name="info"></textarea>

9) 提交(submit 提交 reset 重置)

用户填写的信息会附在 url 地址的后面以查询字符串的形式发送给服务器 – url 地址?查询字符串
格式：属性名=属性值&属性名=属性值属性名=属性值&属性名=属性值&属性名=属性值
在文本框中也可以指定 value 属性值，该值将会作为文本框的默认值显示

10) submit 提交

提交按钮可以将表单中的信息提交给服务器 – 使用 input 创建一个提交按钮，它的 type 属性值是一个 submit
在提交按钮中可以通过 value 来制定按钮上的文字

<input type="submit" value="注册" />

11) reset 重置

reset 可以创建一个重置按钮
点击重置按钮以后表单中的内容将会恢复默认值

<input type="reset" />

12) button 按钮

使用 input type=button 可以用来创建一个单纯的按钮
这个按钮没有任何功能，只能被点击

<input type="button" value="按钮" />

除了使用 input，也可以使用 button 标签来创建按钮
这种方式和 input 类似，只不过由于它是成对出现的标签， – 使用起来更加的灵活

<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">按钮</button>

原文地址:https://blog.csdn.net/weixin _64933233/art icle/de tails/127974591

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

如若转载，请注明出处：http://www.7code.cn/show_20428.html

如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

分组表单表格

文章 目录

表格

表格的说明(创建 一个 表格)

1. 说明

2. 设置

表头和表格边框样式 设置

1. 设置

长表格结构和补充

1. 说明

2. 结构

3. 补充

表格布局(被淘汰)

1. 表格布局(已经被 CSS 淘汰)

表单

1. 表单的作用

2. 创建一个表单

3. 表单的各个标签(表单项)

1) fieldset 分组

2) legend 组名

3) label 提示 文字

4) input 文本框

①密码框

②单选按钮

③多选框

5) select 下拉 列表

6) optgroup 选项分组

7) option 下拉 列表项

8) textarea 文本域

9) 提交(submit 提交 reset 重置)

10) submit 提交

11) reset 重置

12) button 按钮

发表回复取消回复

表格的说明(创建一个表格)

1. 说明

2. 设置

表头和表格边框样式设置

1. 设置

长表格结构和补充

1. 说明

2. 结构

3. 补充

表格布局(被淘汰)

1. 表格布局(已经被 CSS 淘汰)

1. 表单的作用

2. 创建一个表单

3. 表单的各个标签(表单项)

1) fieldset 分组

2) legend 组名

3) label 提示文字

4) input 文本框

①密码框

②单选按钮

③多选框

5) select 下拉列表

6) optgroup 选项分组

7) option 下拉列表项

8) textarea 文本域

9) 提交(submit 提交 reset 重置)

10) submit 提交

11) reset 重置

12) button 按钮

相关文章

发表回复 取消回复

发表回复取消回复