CSS——表格与表单的简介

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

Bonsoir777

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

阅读量646

点赞数 1

分类专栏： css/css3 文章标签： html css css3 前端

本文链接：https://blog.csdn.net/Bonsoir777/article/details/125781534

版权

css/css3 专栏收录该内容

32 篇文章 2 订阅

订阅专栏

文章目录

前言
一、什么是表格？
二、什么是表单
- 1.表单中的常用项与介绍
- 2.补充点
总结

前言

本文主要介绍了html中表格与表单的相关知识点

一、什么是表格？

表格的应用在日常生活中十分的常见，例如银行的出纳单，学校的课程表等等，那么怎样通过HTML和CSS制作如下图的表格呢？

HTML结构

其中：

表格用table标签表示，可给表格设置边框、背景色、大小等
th 表示表头部分，有默认效果，例如字体的加粗、文字的居中显示
tr 表示表格的每一行
td则表示每一列

<table >



<tr>

<th>第一列</th>

<th>第二列</th>

<th>第三列</th>

</tr>

<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>

</table>

CSS样式

其中：

border-collapse:collapse; 设置边框的合并或者 border-spacing: 10px; 指定边框之间的距离，当设置了border-collapse时，border-spacing:0 将自动失效
tr:nth-child(even){ background-color: #bfa; } 给表格中的偶数行设置背景色，可以使用伪类选择器设置表格奇数或偶数行底色 : nth-child() 选中第n个子元素，

特殊值：

n 第n个的范围0到正无穷
2n或even表示选中偶数位的元素
2n+1 或odd表示选中奇数位的元素

<style>

table{

margin: 0 auto;

border: 1px solid black;

/* 边框的合并 */

border-collapse:collapse;

background-color: pink;

}

tr,td,th{

border: 1px solid black;

}

tr:nth-child(even){

background-color: #bfa;

}

td{

text-align: center;

}

</style>

二、表单

1.什么是表单

如图，这是一个登录界面，也就是一个表单，其中的登录与注册等就是表单中的一个构成项

2.表单中的常用项与介绍

示例图：

HTML结构

 <!-- action:表单要提交的服务器的网址-->
    <form action="练习.html">
        <!-- input为行内元素 -->
        <!-- 数据要提交到服务器中，必须要为元素指定一个name属性值 -->
        文本框 <input type="text" name="username" value="">
        <br>
        <!-- 密码框，输入数据默认是隐藏状态 -->
        密码框 <input type="password" name="keywords">
        <br>
        <!-- 提交按钮，value值可给提交按钮指定名称-->
        <input type="submit" value="提交">
        <input type="reset"> 重置按钮
        <input type="button"> 普通的按钮，不可以进行提交
        <br>
        <!--  单选按钮，必须要为元素指定一个value属性，
                value属性最终会作为用户填写的值
                checked可以将单选按钮设置为默认选中
                一组单选，name值必须相同   -->
        <input type="radio" name="chose" value="1">
        <input type="radio" name="chose" value="2" checked>
        <!-- name属性进行分组，属性相同则是一组按钮就可以实现单选，如果不设置，则都可以选择，
        value 属性必须设置，这样被选中的表单项的value属性值将会最终提交给服务器
        checked 属性可设置，按钮是否默认被选中 -->
        <br>
        <!--  复选框 -->
        <input type="checkbox" name="chose" value="1">
        <input type="checkbox" name="chose" value="1" checked>
        <input type="checkbox" name="chose" value="1">
        <br>
        <!-- 下拉列表，selected可以将选项设置为默认选中 -->
        <select name="chose" id="">
            <option value="1">中国</option>
            <option selected value="2">美国</option>
            <option value="3">法国</option>
        </select>
    </form>