CSS——表格和表单的常用属性

LaoKonB

于 2025-05-05 17:20:34 发布

阅读量716

点赞数 11

分类专栏： wed前端开发文章标签： css 前端 html

本文链接：https://blog.csdn.net/2401_89085837/article/details/147719225

版权

wed前端开发专栏收录该内容

8 篇文章

订阅专栏

一、常用表格属性

1、border-collapse：设置表格的边框合并规则。可以设置为collapse来合并边框，或设置为separate来分隔边框（默认值为separate）。

2、border：设置表格的边框样式、宽度和颜色。例如：border: 1px solid black;表示边框为1像素宽度、实线样式、黑色颜色。

3、background-color：设置表格单元格的背景色。

4、text-align：设置表格单元格内文本的水平对齐方式。可以设置为left（默认值）、center、right。

5、vertical-align：设置表格单元格内文本的垂直对齐方式。可以设置为top、center、bottom。

6、color：设置表格单元格内文本的颜色。

7、font-family：设置表格单元格内文本的字体系列。

8、font-size：设置表格单元格内文本的字体大小。

9、width 和 height：设置表格的宽度和高度。

例如:

<head>
    <style>
        table{
            width: 400px;
            height: 200px;
            border:red 3px solid;
            border-collapse: collapse;
            text-align: right;
        }
        th{
            border: red 3px solid;
            background-color: gray;
            vertical-align: bottom;
            color: blue;
        }
        td{
            border: red 3px solid;
            background-color: yellow;
            vertical-align: bottom;
        }
    </style>
</head>

<body>
    <table border="1">
        <tr>
            <th scope="col" id="th0">无</th>
            <th scope="col">列标题1</th>
            <th scope="col">列标题2</th>
        </tr>
        <tr>
            <th scope="col">行标题1</th>
            <td id="td5">普通单元格1</td>
            <td>普通单元格2</td>
        </tr>
        <tr>
            <th scope="col">行标题2</th>
            <td>普通单元格3</td>
            <td>普通单元格4</td>
        </tr>
    </table>
</body>

以上的代码设置了表格的宽高：width、height ；

设置了表格的边框颜色，边框宽度：border；

合并了边框：border-collapse；

设置了表格内文本的水平对齐方式：text-align；

设置文本的垂直对齐方式：vertical-align；

设置了文本的颜色：color；

设置背景颜色：background-color；

二、表单常用属性

1、这是默认样式的文本域：

<p>      
    <input type="text" name="normal">
    默认样式的文本域    
</p>

要使得文本域改变边框颜色和文本颜色：

<head>
    <style>
        .text1{
        border: orange 3px double;
        color: cornflowerblue;
        }
    </style>
</head>

<body>
    <p>
        <input name="chbd" type="text" value="输入的文字显示为蓝色" class="text1">
        改变了边框颜色和文字颜色的文本域
    </p>
</body>

这里使用了 class 属性，连接了 CSS 和 HTML ，将边框颜色变成了橙色，文本变成了蓝色。

而要想让文本域添加图片：

<head>
    <style>
    .text2{
        height: 25px;
        padding-left: 120px;
        background:url(https://ts1.tc.mm.bing.net/th/id/R-C.b4510ac8b39666a7c315ba3bda6045aa?rik=jBddQonfsvmSBw&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f40026%2f3638.jpg_wh1200.jpg&ehk=3bZ7OCrTr4gB%2b12kMZ%2frpDG5ZGLwKx4YP9N32L9haRc%3d&risl=&pid=ImgRaw&r=0);
    }
    </style>
</head>

<body>
    <p>      
        <input name="password" type="password" class="text2">
        增加了背景图片的文本域    
    </p>
</body>

上面的代码调整了图片的大小以及添加的图片的路径。

2、这是一个默认风格的提交按钮

<p>      
    <input name="button" type="submit" value="提交" />
    默认风格的提交按钮    
</p>

调整按钮的样式：

<head>
    <style>
        .btn00{height: 30px;
            border: palevioletred 2px dashed;
            background-color: pink;
            opacity:0.3;
        }
    </style>
</head>

<body>
    <p>      
        <input name="button00" type="submit" class="btn00" id="button0" value="登录">
        这是一个加大的虚线边框，填充粉色，透明度为0.3的按钮   
    </p>
</body>

一个鼠标悬停变手指的无边框按钮：

<head>
    <style>
        .btn01{ width: 80px;
            border: none;
            cursor: pointer;
            font-weight: bolder;
        }
    </style>
</head>

<body>
    <p>      
        <input name="button01" type="submit" class="btn01" id="button1" value="注册">
        鼠标悬停变手指的无边框按钮    
    </p>
</body>

三、代码

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单表格属性练习</title>


    <style>
        table{
            width: 400px;
            height: 200px;
            border:red 3px solid;
            border-collapse: collapse;
            text-align: right;
        }
        th{
            border: red 3px solid;
            background-color: gray;
            vertical-align: bottom;
            color: blue;
        }
        td{
            border: red 3px solid;
            background-color: yellow;
            vertical-align: bottom;
        }
        .text1{
            border: orange 3px double;
            color: cornflowerblue;
        }
        .text2{
            height: 25px;
            padding-left: 120px;
            background:url(https://ts1.tc.mm.bing.net/th/id/R-C.b4510ac8b39666a7c315ba3bda6045aa?rik=jBddQonfsvmSBw&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f40026%2f3638.jpg_wh1200.jpg&ehk=3bZ7OCrTr4gB%2b12kMZ%2frpDG5ZGLwKx4YP9N32L9haRc%3d&risl=&pid=ImgRaw&r=0);
        }
        .btn00{height: 30px;
            border: palevioletred 2px dashed;
            background-color: pink;
            opacity:0.3;
        }
        .btn01{ width: 80px;
            border: none;
            cursor: pointer;
            font-weight: bolder;
        }
    </style>
</head>
<body>
    <table border="1">
        <tr>
            <th scope="col" id="th0">无</th>
            <th scope="col">列标题1</th>
            <th scope="col">列标题2</th>
        </tr>
        <tr>
            <th scope="col">行标题1</th>
            <td id="td5">普通单元格1</td>
            <td>普通单元格2</td>
        </tr>
        <tr>
            <th scope="col">行标题2</th>
            <td>普通单元格3</td>
            <td>普通单元格4</td>
        </tr>
    </table>

    <br><br><hr><br><br>

    <p>      
        <input type="text" name="normal">
        默认样式的文本域    
    </p>

    <p>
        <input name="chbd" type="text" value="输入的文字显示为蓝色" class="text1">
        改变了边框颜色和文字颜色的文本域
    </p>

    <p>      
        <input name="password" type="password" class="text2">
        增加了背景图片的文本域    
    </p>



    <p>      
        <input name="button" type="submit" value="提交" />
        默认风格的提交按钮    
    </p>

    <p>      
        <input name="button00" type="submit" class="btn00" id="button0" value="登录">
        这是一个加大的虚线边框，填充粉色，透明度为0.3的按钮   
    </p>

    <p>      
        <input name="button01" type="submit" class="btn01" id="button1" value="注册">
        鼠标悬停变手指的无边框按钮    
    </p>
</body>
</html>