表格的制作和CSS选择器

程序员文章站 2022-03-03 23:13:26

...

表格的操作和CSS选择器控制

表格的处理

表格(table)的组成部分
- 表头thead标签表头内容区域
- caption标签表格标题居中显示
- tbody标签表格主区域
- tfoot标签
- th 标签 表格头，内容居中，加粗显示-
- tr 标签表格行元素
- td 标签表格列元素

先画行再画列


   <tr>
        <td>姓 名:</td>
        <td>马小姐</td>
        <td>性 别:</td>
        <td>女</td>
        <td rowspan="7"></td>
    </tr>

td标签的主要属性

rowspan合并行;

colspan合并列;

CSS选择器

四大基本选择器

类选择器(class选择器) 通过在style里用点(.)命名


 .zhuTiao
         {
            background-color: #a8c6ea;
          }

  .fuTiao
        {
            background-color: #e7eeff;
            font-weight: bolder;
        }

使用的时候在标签内引用去查找

<td colspan="5" class="zhuTiao"></td>

ID选择器通过(#)命名


#zt{
    background-color: #a8c6ea;
}

/***********用的时候直接在标签里用过ID来引用************/
<td colspan="5" id="zt"></td>

标签选择器通用标签名如)(div tabel )来命名选择


        table,tr,td{
            border: solid 1px;
            border-collapse: collapse;
        }
        td{
            height: 20px;
            width: 150px;
        }
        tr{
            width: 750px;
        }

通配选择器(*) 对所有标签起作用

其它选择器

后代选择器

E:first-child 对一个父元素中的第一个子元素E设置样式。
E:last-child 对一个父元素中的对吼一个子元素E设置样式。

E:nth-child() 对指定需要的子元素E设置样式。


 tr:nth-child(1)
        {
        background-color: #a8c6ea;
        }
tr:nth-child(2)
        {
        background-color: #e7eeff;
        font-weight: bolder;
        }
tr:nth-child(10)
        {
        background-color: #a8c6ea;
        }
tr:nth-child(11)
        {
        background-color: #e7eeff;
        font-weight: bolder;
        }


     - E:nth-last-child() 对指定需要的子元素E设置样式。

     - E:nth-of-type() 与:nth-child()作用类似，但是仅匹配使用的同种标签元素。

     - E:nth-last-of-type() 与:nth-last-child()作用类似，但是仅匹配使用的同种标签

     - E:nth-child(an+b)

练习


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css选择器</title>
    <style>
        table,tr,td{
            border: solid 1px;
            border-collapse: collapse;
        }
        td{
            height: 20px;
            width: 150px;
        }
        tr{
            width: 750px;
        }

        /*tr:nth-child(1)*/
        /*{*/
        /*background-color: #a8c6ea;*/
        /*}*/
        /*tr:nth-child(2)*/
        /*{*/
        /*    background-color: #e7eeff;*/
        /*    font-weight: bolder;*/
        /*}*/

        /*tr:nth-child(10)*/
        /*{*/
        /*    background-color: #a8c6ea;*/
        /*}*/
        /*tr:nth-child(11)*/
        /*{*/
        /*    background-color: #e7eeff;*/
        /*    font-weight: bolder;*/
        /*}*/

        /*tr:nth-child(22)*/
        /*{*/
        /*    background-color: #a8c6ea;*/
        /*}*/
        /*tr:nth-child(23)*/
        /*{*/
        /*    background-color: #e7eeff;*/
        /*    font-weight: bolder;*/
        /*}*/
        /*tr:nth-child(26)*/
        /*{*/
        /*    background-color: #a8c6ea;*/
        /*}*/
        /*tr:nth-child(27)*/
        /*{*/
        /*    background-color: #e7eeff;*/
        /*    font-weight: bolder;*/
        /*}*/
        /*tr:nth-child(37)*/
        /*{*/
        /*    background-color: #a8c6ea;*/
        /*}*/
        /*tr:nth-child(38)*/
        /*{*/
        /*    background-color: #e7eeff;*/
        /*    font-weight: bolder;*/
        /*}*/

        .zhuTiao{
            background-color: #a8c6ea;
        }
        .fuTiao{
            background-color: #e7eeff;
            font-weight: bolder;
        }
    table{
        margin: 20px auto;
    }
    </style>
</head>
<body>

<table>
    <thead>
    </thead>
    <tbody>
    <tr>
        <td colspan="5" class="zhuTiao"></td>

    </tr>
    <tr>
        <td colspan="5" class="fuTiao">-------基本资料-------</td>

    </tr>
    <tr>
        <td>姓 名:</td>
        <td>马小姐</td>
        <td>性 别:</td>
        <td>女</td>
        <td rowspan="7"></td>
    </tr>
    <tr>
        <td>学 历:</td>
        <td>中专</td>
        <td>身 高:</td>
        <td>168CM</td>

    </tr>
    <tr>
        <td>籍 贯:</td>
        <td>广东</td>
        <td>出生年月:</td>
        <td>1991-12-01</td>
    </tr>
    <tr>
        <td>毕业院校:</td>
        <td colspan="3">汕头市林百欣科技中学</td>

    </tr>
    <tr>
        <td>主修专业:</td>
        <td colspan="3">管理学=>会计学</td>

    </tr>
    <tr>
        <td>工作经验:</td>
        <td>未知</td>
        <td>目前年薪:</td>
        <td>保密/年</td>
    </tr>
    <tr>
        <td>有效证件:</td>
        <td>身份证</td>
        <td>证件号码:</td>
        <td>******************</td>
    </tr>
    <tr>
        <td colspan="5" class="zhuTiao"></td>

    </tr>
    <tr>
        <td colspan="5" class="fuTiao">-------求职意向-------</td>
    </tr>
    <tr>
        <td>寻求职位:</td>
        <td colspan="4">出纳员,会计文员</td>
    </tr>
    <tr>
        <td>求职地区:</td>
        <td colspan="2">罗湖区 福田区</td>
        <td>工次待遇:</td>
        <td>面议</td>
    </tr>
    <tr>
        <td rowspan="7">自我评价</td>
        <td colspan="5" rowspan="7">本人对待工作认真负责.谨慎,细心,与人相处融恰,任劳任怨,是一个有亲和力的人乐于助人,有房好的团队精神 ,能吃苦耐劳.
        积极配合领导的每一项工作.深得领导和同事的.业余时间喜欢看些书充实下自己.
        并参加了西安交通大学的成人高考提升了自己的学历,勤于学习能不断提高自身的能力和
        综合素质,有上进心,具有较强的适应能力,熟悉办公软件,自毕业之后一直在企业担任出纳
        工作.有一定的工作经验.期望从事职业:出纳员,会计文员.期望月薪:面议 目前状况:我目前处于
        离职状态,可立即上岗.</td>
    </tr>
    <tr></tr>
    <tr></tr>
    <tr></tr>
    <tr></tr>
    <tr></tr>
    <tr></tr>
    <tr></tr>
    <tr>
        <td colspan="5" class="zhuTiao"></td>

    </tr>
    <tr>
        <td colspan="5" class="fuTiao">-------教育培训-------</td>
    </tr>
    <tr>
        <td>起止时间</td>
        <td colspan="2">就读院校名称</td>
        <td>主修专业</td>
        <td>学历</td>
    </tr>
    <tr>
        <td>2009.09~2012.07</td>
        <td colspan="2">汕头市林百欣科技中专</td>
        <td>会计电算化</td>
        <td>中专</td>
    </tr>
    <tr>
        <td colspan="5" class="zhuTiao"></td>

    </tr>
    <tr>
        <td colspan="5" class="fuTiao">-------工作经验(1)-------</td>
    </tr>
    <tr>
        <td>就职公司:</td>
        <td colspan="2">深圳市支鹏电器有限公司</td>
        <td>公司行业</td>
        <td>其它</td>
    </tr>
    <tr>
        <td>就职时间:</td>
        <td colspan="2">2011年12月到如今</td>
        <td>就职部分:</td>
        <td>账务部</td>
    </tr>
    <tr>
        <td>公司性质:</td>
        <td colspan="2">其它</td>
        <td>就职职位:</td>
        <td>出纳员</td>
    </tr>
    <tr>
        <td rowspan="5">工作描述</td>
        <td colspan="4" rowspan="5">1.负责办理现金收,付款业务2,银行
        存款,收款,付款工作 3,负责日常费用报销.员工借款给付,保证各项收支
        手续完整,金额准确.4,负责库存现金的保管及盘点.每天登记现金流水账,做到账款
        相符.5,每月准时交水电费,管理费.6,协助会计报税,购买发票等.7,负责公司
        银行账号开办,变更,撤销工作.8,负责公司营业执照,税务登记证等执照的年检工作.
        9,负责印章,合同等的保管工作.10,完成上级领导的其它安排事项.</td>
    </tr>
    <tr></tr>
    <tr></tr>
    <tr></tr>
    <tr></tr>
    <tr></tr>
    <tr>
        <td colspan="5" class="zhuTiao"></td>

    </tr>
    <tr>
        <td colspan="5" class="fuTiao">-------联系方式-------</td>
    </tr>
    <tr>
        <td>联系电话:</td>
        <td colspan="4">134********</td>
    </tr>
    <tr>
        <td>联络手机:</td>
        <td colspan="4">134********</td>
    </tr>
    <tr>
        <td>电子邮箱:</td>
        <td colspan="4">********@163.com</td>
    </tr>
    </tbody>
</table>
</body>
</html>

效果图片
表格的制作和CSS选择器

上一篇： VUE3学习，购物车结算练习

下一篇： php 里 int是什么意思

表格的制作和CSS选择器

表格的操作和CSS选择器控制

表格的处理

CSS选择器

css的高级选择器,后代选择器,子代选择器,并集选择器,交集选择器

!important、CSS样式、选择器优先级高低的深入理解

css样式和选择器的使用方法

最容易让人误解的10个 CSS 选择器_html/css_WEB-ITnose

[菜鸟发问]表格单元格的内容_html/css_WEB-ITnose

关于在HTML表格中插入背景图片图片重复显示的问题_html/css_WEB-ITnose

CSS3复杂选择器的详解

CSS3的[att*=val]选择器_html/css_WEB-ITnose

css3 伪对象选择器添加几何图形文字的方法

css所有选择器的详解_html/css_WEB-ITnose