css表格表单

最新推荐文章于 2024-05-14 16:52:58 发布

嘿！真的。

最新推荐文章于 2024-05-14 16:52:58 发布

阅读量242

点赞数

文章标签： css3 html5 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/qq_59207203/article/details/129248472

版权

一、表格

表格在日常生活中使用的非常的多，比如excel就是专门用来创建表格的工具，

表格就是用来表示一些格式化的数据的，比如：课程表、银行对账单

在网页中也可以来创建出不同的表格。

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

2、在table标签中使用tr来表示表格中的一行，有几行就有几个tr

3、在tr中需要使用td来创建一个单元格，有几个单元格就有几个td

4、border="1" width="40%" align="center"

5、rowspan 合并行单元格

6、colspan 合并列单元格

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>表格</title>
  </head>
  <body>
    <table border="1" width="500" align="center">
      <tr>
        <td>序号</td>
        <td>组长</td>
        <td>组员</td>
        <td>组员</td>
        <td rowspan="5">1</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>合计</td>
        <td colspan="3"></td>
      </tr>
    </table>
  </body>
</html>

补充：表格样式

设置文本水平居中效果

  text-align: center;

设置文本垂直居中效果

vertical-align:middle

2、

可以用来设置表格的边框合并，如果设置了边框合并，则border-spacing自动失效

 border-collapse:collapse;

3、

有一些情况下表格是非常的长的，

这时就需要将表格分为三个部分，表头，表格的主体，表格底部

在HTML中为我们提供了三个标签：的中间

如果表格中没有写tbody，浏览器会自动在表格中添加tbody

并且将所有的tr都放到tbody中，所以注意tr并不是table的子元素，而是tbody的子元素

通过table > tr 无法选中行需要通过tbody > tr

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
      table > tbody > tr {
        color: red;
      }
    </style>
  </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>
      </tbody>
      
    </table>
  </body>
</html>

二、表单

表单：将用户信息等本地的数据信息提交给服务器的。比如：百度的搜索框注册登录这些操作都需要填写表单

1、创建表单 form标签

属性：

action属性（必须要写）

指向的是一个服务器的地址，当我们提交表单时将会表单相关的数据提交到action属性对应的地址

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

2、添加表单项

使用form创建的仅仅是一个空白的表单，

我们还需要向form中添加不同的表单项

1）input来创建一个文本框，

type属性：text

name属性：提交内容的名字

如果希望表单项中的数据会提交到服务器中，必须指定一个name属性

value属性值：作为文本框的默认值显示就是用户输入的内容，也就是要提交给服务器的值

 用户名：<input type="text" name="username" value="张三" /><br /><br />

2）input创建一个密码框

type属性值:password

name属性：提交密码的名字

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

（3）input创建一个单选按钮

- type属性：radio

- name属性进行分组，属性相同是一组按钮，如果不设置，则都可以选择

- value属性必须设置，这样被选中的表单项的value属性值将会最终提交给服务器

- checked属性默认选中可以直接添加属性，不写属性值

  性别：男 <input type="radio" name="sex" checked /> 女 <input type="radio" name="sex" /> <br /><br />

（4）input创建一个多选框

-type属性:checkbox

-checked属性默认选中

 兴趣爱好：唱歌 <input type="checkbox" checked /> 跳舞 <input type="checkbox" /> 跑步 <input type="checkbox" checked /> 诗朗诵<input type="checkbox" /> 古筝<input type="checkbox" /> <br /><br />

(5)select来创建一个下拉列表

-name属性设置给select，

-value属性设置给option

-selected属性设置给option，将选项设置为默认选中

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

 出生年月：年
      <select name="year">
        <option value="2000">2000</option>
        <option value="2001" selected>2001</option>
        <option value="2002">2002</option>
        <option value="2003">2003</option>
        <option value="2004">2004</option>
      </select>

（6）textarea创建一个文本域

-name属性提交给服务器的名字

-cols属性设置宽度

-rows属性设置高度

个人简介：<textarea name="info" cols="40" rows="10"></textarea><br /><br />

（7）input创建一个提交按钮，点击后表单就会提交

-type属性值：submit

-value属性：指定按钮上的文字,默认是提交

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

（8）创建一个重置按钮，type="reset"

点击重置按钮以后表单中内容将会恢复为默认值

 <input type="reset" />

9）创建一个单纯的按钮，

这个按钮没有任何功能，只能被点击

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

（10）button标签来创建按钮

也可以用type属性来更改button的类型，例如submit、reset、button

方式和使用input类似，它是成对出现的标签，使用起来更加的灵活

 <button type="reset">重置</button>

input属性补充

1: autocomplete="off" 关闭自动补全

2: readonly 设置为只读，不能修改

3: disabled 设置为禁用

4: autofocus 自动获取焦点

5: placeholder 表单提示内容

 <form action="./target.html">
      用户名：<input type="text" placeholder="请输入用户" autofocus readonly value="张三"/> <br><br>
      密码：<input type="password"  placeholder="请输入密码" disabled/>
   </form>