CSS常用声明＞（下篇）#表格属性#表单样式设置_附练习

Tu_17

码龄2年

关注

原创最新推荐文章于 2026-07-02 14:58:46 发布 2.1k 阅读 GEO检测

普歌-前端复习总结HTML+CSS-超详细，超全面（内容较多，建议收藏）普歌-HTML5+CSS复习总结一.HTML基础二级目录三级目录一.HTML基础二级目录三级目录阅读详情

一、设置表格样式

常用的CSS表格属性

属性	说明
border-collapse	设置表格的行和单元格的边是合并在一起还是按照标准的HTML样式分开
border-spacing	设置当表格边框独立时，行和单元格的边框在横向和纵向上的间距
empty-cells	设置当表格的单元格无内容时，是否显示该单元格的边距
text-align	设置单元格内文本水平对齐位置
vertical-align	设置单元格内文本垂直对齐位置

1.border-collapse属性

border-collapse属性用来设置表格的边框是合并成单边框，还是分别有各自的边框。

语法格式：border-collapse:separate | collapse
参数：separate为默认值，表示边框分开，不合并；collapse表示边框合并，即如果两个边框相邻，则共用同一个边框。
如图: 左图为collapse,右图为separate

2.border-spacing属性

border-spacing属性用来设置相邻单元格边框间的距离。

语法格式：border-spacing:length | | length
参数：length为由浮点数字和单位标识符组成的长度值，不可为负值。
说明：该属性用于设置当表格边框独立（border-collapse属性等于separate）时，单元格的边框在横向和纵向上的间距。当只指定一个 length 值时，这个值将作用于横向和纵向上的间距；当指定了全部两个length值时，第1个作用于横向间距，第2个作用于纵向间距。

3.empty-cells属性

empty-cells属性用于设置当表格的单元格无内容时，是否显示该单元格的边框。

语法格式：empty-cells:hide | show
参数：show为默认值，表示当表格的单元格无内容时显示单元格的边框；hide表示当表格的单元格无内容时隐藏单元格的边框。
说明：只有当表格边框独立时，该属性才起作用。

4.text-align属性

text-align属性用于设置单元格内文本水平对齐位置。

语法格式：text-align:center | left | right

5. vertical-align属性

vertical-align属性用于设置单元格内文本垂直对齐位置。

语法格式：vertical-align:top | bottom | middle

例如：

<style>
        .table{
            width: 400px;
            height: 200px;
            border: 2px red solid;
            border-collapse: collapse;
            background-color: gray;
            color: aqua;
        }

        td{
            /* 设置单元格内文本水平对齐位置 */
            text-align: center;
             /* 设置单元格内文本垂直对齐位置 */
             vertical-align: middle;
        }
        #td9{
            background-color: green;
            color: black;
            /* 设置单元格内文本水平对齐位置 */
            text-align: right;
             /* 设置单元格内文本垂直对齐位置 */
             vertical-align: top;
        }



    </style>
</head>
<body>
    
    <table border="1" class="table">
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
            <td>单元格3</td>
        </tr>
        <tr>
            <td>单元格4</td>
            <td>单元格5</td>
            <td>单元格6</td>
        </tr>
        <tr>
            <td>单元格7</td>
            <td>单元格8</td>
            <td id="td9">单元格9</td>
        </tr>
    </table>
</body>

运行的结果为：

二、设置表单样式

1.修饰文本域

文本域主要用于采集用户在其中编辑的文字信息，通过CSS样式可以对文本域内的字、颜色，以及背景图像加以控制。

下面以示例的形式介绍如何使用CSS修饰文本域。

代码为：

<style>
        #text2{
            width: 400px;
            height: 50px;
            color: aqua;
            background-color: gray;
            /* 图片 */
            background-image: url();
            background-repeat: no-repeat;
            border: 2px red double;
        }
</style>
</head>
<body>
    <form action="">
        <input type="text" id="text1">这是默认文本输入框
        <br>

        <input type="text" id="text2" value="此处输入您的账号">这是个有默认值的输入框
    </form>
</body>

2.修饰按钮

按钮主要用于控制网页中的表单。通过CSS样式可以对按钮的字体、颜色、边框,以及背景图像加以控制。

下面以示例的形式介绍如何使用CSS修饰按钮。

代码如下：

<style>
    #btn2{
            width: 100px;
            height: 50px;
            color: aqua;
            background-color: green;
            border: 2px red dashed;
        }
</style>
</head>
<body>
    <form action="">
        <input type="submit" id="btn1">这是默认按钮
        <br>
        <input type="submit" id="btn2">这是设置了样式的按钮
    </form>
</body>

三、练习

如图：

代码如下：

<style>
        .table{
            width: 400px;
            height: 200px;
            border: 2px red solid;
            border-collapse: collapse;
            background-color: gray;
            color: aqua;
        }


        #td1{
            background-color:gold;
            color: black;
            text-align:right;
            vertical-align:bottom;
        }

        #td2{
            background-color:gold;
            color: black;
            text-align:right;
            vertical-align:bottom;
        }

        #td3{
            background-color:gold;
            color: black;
            text-align:right;
            vertical-align:bottom;
        }

        #td4{
            background-color:gold;
            color: black;
            text-align:right;
            vertical-align:bottom;
        }


        #text2{
            color: blue;
            border: 2px yellow double;
        }

        #text3{
            width: 500px;
            height: 30px;
            background-image: url(./shili2.png);
        }

        #btn2{
            background-color: pink;
            opacity: 0.3;
            border: 5px rgb(230, 43, 124) dashed;
        }
        #btn3{
            width: 80PX;
            height: 50px;
            color: black;
            
            cursor: pointer;
            border: none;
        }
    </style>

</head>
<body>
    
    <table border="1" class="table">
        <tr>
            <td>无</td>
            <td>列标题1</td>
            <td>列标题2</td>
        </tr>
        <tr>
            <td>行标题1</td>
            <td id="td1">普通单元格1</td>
            <td id="td2">普通单元格2</td>
        </tr>
        <tr>
            <td>行标题2</td>
            <td id="td3">普通单元格3</td>
            <td id="td4">普通单元格4</td>
        </tr>
    </table>
    <br>
    <br>
    <br>
    <hr>
    <br>
    <br>
    <br>
    <form action="">
        <input type="text" id="text1">默认样式的文本框
        <br>
        <input type="text" id="text2">改变了边框颜色和文字颜色的文本域
        <br>
        <input type="text" id="text3">增加了背景图片的文本域
        <br>
        <input type="submit" id="btn1" value="提交">默认风格的提交按钮
        <br>
        <input type="submit" id="btn2" value="登录">这是一个加大的虚线边框，填充粉色，透明度为0.3的按钮
        <br>
        <input type="submit" id="btn3" value="注册">鼠标悬停变手指的无边框按钮
</body>