表格的创建和样式

AiNi_promises

已于 2022-12-02 15:23:59 修改

阅读量202

点赞数

分类专栏：笔记文章标签： excel html 前端

于 2022-12-02 13:27:08 首次发布

本文链接：https://blog.csdn.net/m0_48462345/article/details/128146496

版权

笔记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

表格

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

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

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

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

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

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

4 通过属性设置样式，border="1" width="40%" align="center"

5 rowspan用来设置纵向的合并单元格

6 colspan横向的合并单元格

 <!-- table创建表格 -->
      <table border="1" width='50%' align="center">
      <!-- 表头 -->
        <thead>
        <tr>
          <th>姓名</th>
          <th>性别</th>
          <th>薪资</th>
        </tr>
      </thead>
      <!-- 表格主体内容 -->
      <tbody>
        <tr>
          <td>01</td>
          <td>张三</td>
          <td>60</td>
        </tr>
        <tr>
          <td>02</td>
          <td>李四</td>
          <td>90</td>
        </tr>
      </tbody>
      <!-- 表格底部 -->
        <tfoot>
        <tr>
          <td>小记</td>
          <td>88888</td>
        </tr>
      </tfoot>
      </table>

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

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

在HTML中为我们提供了三个标签 thead tbody tfoot

如果表格中没有写tbody，浏览器默认表格中添加tbody

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

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

表格样式

   /*需求一、设置表格的宽度，表格居中，边框 */
      table{
        width: 50%;
        border: 1px solid red;
        /* 表格居中 */
        margin: 0 auto;
        /* 需求二： 设置表格的边框，要单线边框  */
        /* border-spacing: 0px; */
        border-collapse: collapse; 
        /* 给表格设置背景色样式 */
        /* background-color: hotpink; */
      }
      th,tr,td{
        border: 1px solid green;
      }
      /*需求四： 设置隔行变色 tr:nth-child(even)*/
      tr:nth-child(2n+1){
        background-color: hotpink;
      }
      /*需求二： 设置表格的边框，要单线边框 
            方法一  border-spacing:0px ;
            方法二  border-collapse [kə'læps] 可以用来设置表格的边框合并
              如果设置了边框合并，则border-spacing自动失效   
      */
      /*需求三：给表格设置背景色样式*/

      /*需求四： 设置隔行变色 tr:nth-child(even)*/
      /*需求五： 鼠标移入到tr以后，改变颜色*/
      tr:hover{
        background-color: indianred;
      }
      /*需求六：调整td文字在表格中的位置  vertical-align、text-align*/
      td{
        height: 50px;
        /* 文字水平居中 */
        text-align: center;
        /* 文字垂直居中  默认值 */
        vertical-align: middle;
      }

经过修改后的clearfix是一个多功能的

既可以解决高度塌陷，又可以确保父元素和子元素的垂直外边距不会重叠

.clearfix:before,

.clearfix:after{

content: "";

display: table;

clear: both;

}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      .box1 {
        width: 200px;
        height: 200px;
        background-color: #bfa;
      }

      .box2 {
        width: 100px;
        height: 100px;
        background-color: yellow;
        margin-top: 100px;
      }
      /* 高度塌陷 */
      .box3 {
        border: 10px red solid;
      }
      .box4 {
        width: 100px;
        height: 100px;
        background-color: yellowgreen;
      }
      /* 
         解决父子外边距重叠问题
         解决高度塌陷的问题
      */
      .clearfix::before,
      .clearfix::after {
        content: "";
        display: table;
        clear: both;
      }
    </style>
  </head>
  <body>
    <div class="box3 clearfix">
      <div class="box4"></div>
    </div>

    <div class="box1 clearfix">
      <div class="box2"></div>
    </div>
  </body>
</html>

表单：将用户信息、用户搜索的内容等本地的数据信息提交给服务器的，

让服务器做下一步的处理

比如：百度的搜索框注册登录这些操作都需要填写表单

1:创建表单 form标签

属性：

action属性（必须要写）

指向的是一个服务器的地址，提交表单后会提交到action属性对应的地址

2:添加表单项

使用form创建的仅仅是一个空白的表单，可以向form中添加不同的表单项

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

type属性值：text

name属性：提交内容的名字

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

value属性值：作为文本框的默认值显示，是你在输入框里输入的内容，

提交表单的时候，会将value的值提交出去

（2）input创建一个密码框

type属性值：password

name属性：提交密码的名字

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

type属性：radio

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

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

checked="checked" 默认选中

（4）input创建一个多选框

type属性:checkbox

checked="checked"属性默认选中

（5）select来创建一个下拉列表

name属性设置给select，

value属性设置给option

selected="selected"，将选项设置为默认选中

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

（6）textarea创建一个文本域

name="info"

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

type属性值：submit

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

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

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

（9）input创建一个单纯的按钮，type='button' value='按钮'

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

（10）button标签来创建按钮

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <!-- 创建一个表单 -->
    <form action="./target.html">
      <!-- input 输入框  单标签  根据不同的type属性，改变输入框的性质 -->
      <!-- (1)文本框 -->
      用户名：<input type="text" name="username" value="李四" /><br /><br />
      <!-- （2）密码框 -->
      密码：<input type="password" name="password" /><br /><br />
      性别：男 <input type="radio" name="sex" value="boy" /> 女 <input type="radio" name="sex" value="girl" checked /> <br /><br />
      兴趣爱好：学习<input type="checkbox" checked /> 跑步<input type="checkbox" /> 打篮球<input type="checkbox" /> 追剧<input type="checkbox" checked /> <br /><br />
      年龄：<select name="age">
        <option value="2000">2000</option>
        <option value="2001">2001</option>
        <option value="2002">2002</option>
        <option value="2003" selected>2003</option></select><br /><br />
      个人特长：<textarea name="" id="" cols="20" rows="10"> </textarea><br /><br />
      <input type="submit" value="登录"/>
	  <input type="reset">
	  <input type="button" value="普通按钮">
	  <button>
		  我也是普通按钮
	  </button>
    </form>
  </body>
</html>

代码运行：