当前位置:首页 » php学习笔记 » css-table常见的属性

css-table常见的属性

原创 stpevenchow 13°c 2019年10月17日 23:27 php学习笔记 0条评论
  移步手机端

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>table属性</title>
    <style type="text/css">
        .table1{
            /* 如果执行边框线合并效果,table标签种的边框线可以不写,只设定单元格的边框线 */
            border-collapse: collapse;
            /* caption-side设定标题位置,标题位置默认值为top,bottom为下 */
            caption-side: top;
        }
        .table1 td{
            border: 1px solid pink;
            /* 如果不使用table标签的border属性,如果在table1里面增加border属性则只边框线宽度,没办法改变单元格宽度,如果要增加单元格的宽度需要,找到td标签写 */
        }
        /* 如果没有设定tbody等表格分区标签,所有的tr标签会被浏览器自动添加tbody标签
        此时table标签与tr标签,不在是父子关系,应该是table>tbody>tr的关系
        一般在table当中只是table tr 单元格 的关系,所以一般才会有后代选择器的形式 */
        .table1>tr>td{
            border: 2px solid pink;
        }
    </style>
</head>
<body>
    <table class="table1">
        <caption>知之为知之,不知为不知</caption>
        <tr>
            <td>学习</td>
            <td>php</td>
            <td>是一件</td>
            <td>很幸福</td>
            <td>的事情</td>
        </tr>
        <tr>
            <td>学习1</td>
            <td>php1</td>
            <td>是一件1</td>
            <td>很幸福1</td>
            <td>的事情1</td>
        </tr>
        <tr>
            <td>学习2</td>
            <td>php2</td>
            <td>是一件2</td>
            <td>很幸福2</td>
            <td>的事情2</td>
        </tr>
        <tr>
            <td>学习3</td>
            <td>php3</td>
            <td>是一件3</td>
            <td>很幸福3</td>
            <td>的事情3</td>
        </tr>
        <tr>
            <td>学习4</td>
            <td>php4</td>
            <td>是一件4</td>
            <td>很幸福4</td>
            <td>的事情4</td>
        </tr>
    </table>
</body>
</html>

    今天实在太困了,关于table文字对齐会在明天补上

欢迎阅读本文,如果本文对您有所帮助,记得收藏/转发☺

本文链接:http://stpeven.com/post/141.html

版权声明:本文为原创文章,版权归 stpevenchow 所有,欢迎分享本文,转载请保留出处!

本文标签:

三人行,必有我师

评论(0)

发表评论:


【顶】 【踩】 【好】 【懵】 【赞】 【表情】

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

推荐阅读
11月12日

php--最大储存数值常量,进制

发布 : | 分类 : php学习笔记 | 评论 : 0人 | 浏览 : 1次
php--最大储存数值常量,进制

<?phpphp最大储存数值常量echo PHP_INT_MAX;echo '<br>';php最小储存数值常量echo PHP_INT_MIN;原理:64位操作系统,理论上可以存储的最大数值为2的64次方php程序中,将第一位用作存储整数的正负实际存储数值变为2的63次方式0作为特殊的数值,单独占据正数的存储数值最大正整数2的63次方 - 1 - 1用于存储0最小负整数负的2的63次方整型(int) 的溢出大于最大值,或者小于最小值数据类型会变为浮点型,显示方...

标签 :
11月11日

php--变量的赋值顺序

发布 : | 分类 : php学习笔记 | 评论 : 0人 | 浏览 : 5次
php--变量的赋值顺序

    php的变量赋值顺序,这是之前在千峰上面没有学习过的,今天在达内里面有讲到,就补充一下    <?php// 变量的声明和赋值同时进行 php是一门弱类型的计算机语言// $int = 100;// 重复赋值//// 对一个变量进行重复赋值,之后赋值的数据会覆盖之前存储的数据// $int = 100;// $int = 200;// echo $int;// 连续赋值 是同时给多个变量赋值//// 并...

标签 :
11月10日

css---网站栏目小图标

发布 : | 分类 : php学习笔记 | 评论 : 0人 | 浏览 : 12次
css---网站栏目小图标

    一般我们在前端都会看到各式各样的小图标,他们是怎么实现的呢?可以用ps裁剪,也可以用代码去实现,如下图所示        利用宽高,以及background标签的部分属性,来实现了套图,变成单个图片的形式下面是代码    <!DOCTYPE html><html><head> &nbs...

标签 :
11月09日

css---悬停光标变形

发布 : | 分类 : php学习笔记 | 评论 : 0人 | 浏览 : 13次
css---悬停光标变形

    大多时候肥宅们在浏览二次元网站的时候,很多时候会发现鼠标悬停在某些标题或者栏目的时候,鼠标样式会发生改变,肥宅往往会惊讶程序员的神奇之处,但是并不知其原理,以前我也不知道但是学了伪类选择器hover过后,董其原理,今天学习了cursor属性过后知道其根本,下面就看演示效果把。        下面附上代码,以及注意事项    <...

标签 :
11月08日

css-滑动效果

发布 : | 分类 : php学习笔记 | 评论 : 0人 | 浏览 : 10次
css-滑动效果

    主要运用到overflow-y:scroll以及昨天学习到的white-space:nowrap静止换行,overflow:hidden超出隐藏,text-overflow:ellipsis超出部分变为省略号    <!DOCTYPE html><html><head>    <meta charset="UTF-8">&...

标签 :