码迷,mamicode.com
首页 > Web开发 > 详细

通过css润色html表格

时间:2020-06-10 00:00:33      阅读:114      评论:0      收藏:0      [点我收藏+]

标签:pad   很多   mic   html   png   并且   颜色   img   效果   

原本这只是一个用html编写的干瘪难看的表格:

<body>
    <h1>创建一个3*3的表格</h1>
    <table>
        <tr>
            <!--th和td都是单元格,th里的内容会默认加粗并且居中  -->
            <th>表头1</th>
            <th>表头2</th>
            <th>表头3</th>
            <th>表头4</th>
    
        </tr>
        <tr>
            <td>序号</td>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
        </tr>
        <tr>
            <td>1</td>
            <td>小明</td>
            <td></td>
            <td>10</td>
        </tr>
        <tr>
            <td>2</td>
            <td>小红</td>
            <td></td>
            <td>20</td>
        </tr>
    </table>
</body>

技术图片

 

  •  通过添加CSS层叠样式表     对上面那个表进行修饰和渲染,能让它好看一些
  • css引用的两种方式:
  • 1.放在<style  type="text/css"   >     css代码       </style>   , 实现了css和body的分离。
  • 2.通过<link  href="text/css"  / >    ,在另外一个新建的css文件中 写css代码,  彻底实现了css代码  和 html代码的分离

 

<style type="text/css">
            /* css注释(注释内容和注释符号之间最好用空格隔开 */
            table{
            /* 设置单元格边框合并 */
            border-collapse: collapse;
            /* 为表格设置宽度 */
            width: 70%;
            /* 为表格设置背景颜色 */
            background: green;
            /* 设置表格左右外边距始终相等,表格就会水平方向上居中显示 */
            margin-left:auto;
            margin-right:auto;    
            }
            td,th{/* 选中当前网页中的所有td和th元素 */
            /* 为单元格设置边框(宽度,样式,边框颜色 */
            border:2px solid red;
            /* 设置单元格边框与内容之间的距离 */
            padding:25px;
            }
            h1{
            border:2px solid blue;
            /* 设置元素内容在水平方向上居中 */
            text-align:center;
            }
        </style>

技术图片

 

 

 

这样是不是高档了很多。

border-collapse: collapse;   是设置单元格边框合并

如果单元格边框不合并 效果如下:

技术图片

 

通过css润色html表格

标签:pad   很多   mic   html   png   并且   颜色   img   效果   

原文地址:https://www.cnblogs.com/raphaelJava-4560/p/13081554.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!