Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 表格的制作和CSS选择器
Blogger Information
Blog 14
fans 0
comment 0
visits 8054
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
表格的制作和CSS选择器
「flasky」
Original
755 people have browsed it

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

表格的处理

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

先画行再画列

  1.    <tr>
  2.         <td>姓 名:</td>
  3.         <td>马小姐</td>
  4.         <td>性 别:</td>
  5.         <td>女</td>
  6.         <td rowspan="7"></td>
  7.     </tr>

td标签的主要属性

  1. rowspan合并行;

  2. colspan合并列;

    CSS选择器

    四大基本选择器

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

      1.  .zhuTiao
      2.          {
      3.             background-color: #a8c6ea;
      4.           }
      6.   .fuTiao
      7.         {
      8.             background-color: #e7eeff;
      9.             font-weight: bolder;
      10.         }

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

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

  1. ID选择器 通过(#)命名

    1. #zt{
    2.     background-color: #a8c6ea;
    3. }
    5. /***********用的时候直接在标签里用过ID来引用************/
    6. <td colspan="5" id="zt"></td>

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

    1.         table,tr,td{
    2.             border: solid 1px;
    3.             border-collapse: collapse;
    4.         }
    5.         td{
    6.             height: 20px;
    7.             width: 150px;
    8.         }
    9.         tr{
    10.             width: 750px;
    11.         }

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

    其它选择器

    1. 后代选择器

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

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

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

        1.  tr:nth-child(1)
        2.         {
        3.         background-color: #a8c6ea;
        4.         }
        5. tr:nth-child(2)
        6.         {
        7.         background-color: #e7eeff;
        8.         font-weight: bolder;
        9.         }
        10. tr:nth-child(10)
        11.         {
        12.         background-color: #a8c6ea;
        13.         }
        14. tr:nth-child(11)
        15.         {
        16.         background-color: #e7eeff;
        17.         font-weight: bolder;
        18.         }
  1.      - E:nth-last-child() 对指定需要的子元素E设置样式。
  3.      - E:nth-of-type() 与:nth-child()作用类似，但是仅匹配使用的同种标签元素。
  5.      - E:nth-last-of-type() 与:nth-last-child()作用类似，但是仅匹配使用的同种标签
  7.      - E:nth-child(an+b)

练习

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>css选择器</title>
  6.     <style>
  7.         table,tr,td{
  8.             border: solid 1px;
  9.             border-collapse: collapse;
  10.         }
  11.         td{
  12.             height: 20px;
  13.             width: 150px;
  14.         }
  15.         tr{
  16.             width: 750px;
  17.         }
  19.         /*tr:nth-child(1)*/
  20.         /*{*/
  21.         /*background-color: #a8c6ea;*/
  22.         /*}*/
  23.         /*tr:nth-child(2)*/
  24.         /*{*/
  25.         /*    background-color: #e7eeff;*/
  26.         /*    font-weight: bolder;*/
  27.         /*}*/
  29.         /*tr:nth-child(10)*/
  30.         /*{*/
  31.         /*    background-color: #a8c6ea;*/
  32.         /*}*/
  33.         /*tr:nth-child(11)*/
  34.         /*{*/
  35.         /*    background-color: #e7eeff;*/
  36.         /*    font-weight: bolder;*/
  37.         /*}*/
  39.         /*tr:nth-child(22)*/
  40.         /*{*/
  41.         /*    background-color: #a8c6ea;*/
  42.         /*}*/
  43.         /*tr:nth-child(23)*/
  44.         /*{*/
  45.         /*    background-color: #e7eeff;*/
  46.         /*    font-weight: bolder;*/
  47.         /*}*/
  48.         /*tr:nth-child(26)*/
  49.         /*{*/
  50.         /*    background-color: #a8c6ea;*/
  51.         /*}*/
  52.         /*tr:nth-child(27)*/
  53.         /*{*/
  54.         /*    background-color: #e7eeff;*/
  55.         /*    font-weight: bolder;*/
  56.         /*}*/
  57.         /*tr:nth-child(37)*/
  58.         /*{*/
  59.         /*    background-color: #a8c6ea;*/
  60.         /*}*/
  61.         /*tr:nth-child(38)*/
  62.         /*{*/
  63.         /*    background-color: #e7eeff;*/
  64.         /*    font-weight: bolder;*/
  65.         /*}*/
  67.         .zhuTiao{
  68.             background-color: #a8c6ea;
  69.         }
  70.         .fuTiao{
  71.             background-color: #e7eeff;
  72.             font-weight: bolder;
  73.         }
  74.     table{
  75.         margin: 20px auto;
  76.     }
  77.     </style>
  78. </head>
  79. <body>
  81. <table>
  82.     <thead>
  83.     </thead>
  84.     <tbody>
  85.     <tr>
  86.         <td colspan="5" class="zhuTiao"></td>
  88.     </tr>
  89.     <tr>
  90.         <td colspan="5" class="fuTiao">-------基本资料-------</td>
  92.     </tr>
  93.     <tr>
  94.         <td>姓 名:</td>
  95.         <td>马小姐</td>
  96.         <td>性 别:</td>
  97.         <td>女</td>
  98.         <td rowspan="7"></td>
  99.     </tr>
  100.     <tr>
  101.         <td>学 历:</td>
  102.         <td>中专</td>
  103.         <td>身 高:</td>
  104.         <td>168CM</td>
  106.     </tr>
  107.     <tr>
  108.         <td>籍 贯:</td>
  109.         <td>广东</td>
  110.         <td>出生年月:</td>
  111.         <td>1991-12-01</td>
  112.     </tr>
  113.     <tr>
  114.         <td>毕业院校:</td>
  115.         <td colspan="3">汕头市林百欣科技中学</td>
  117.     </tr>
  118.     <tr>
  119.         <td>主修专业:</td>
  120.         <td colspan="3">管理学=>会计学</td>
  122.     </tr>
  123.     <tr>
  124.         <td>工作经验:</td>
  125.         <td>未知</td>
  126.         <td>目前年薪:</td>
  127.         <td>保密/年</td>
  128.     </tr>
  129.     <tr>
  130.         <td>有效证件:</td>
  131.         <td>身份证</td>
  132.         <td>证件号码:</td>
  133.         <td>******************</td>
  134.     </tr>
  135.     <tr>
  136.         <td colspan="5" class="zhuTiao"></td>
  138.     </tr>
  139.     <tr>
  140.         <td colspan="5" class="fuTiao">-------求职意向-------</td>
  141.     </tr>
  142.     <tr>
  143.         <td>寻求职位:</td>
  144.         <td colspan="4">出纳员,会计文员</td>
  145.     </tr>
  146.     <tr>
  147.         <td>求职地区:</td>
  148.         <td colspan="2">罗湖区 福田区</td>
  149.         <td>工次待遇:</td>
  150.         <td>面议</td>
  151.     </tr>
  152.     <tr>
  153.         <td rowspan="7">自我评价</td>
  154.         <td colspan="5" rowspan="7">本人对待工作认真负责.谨慎,细心,与人相处融恰,任劳任怨,是一个有亲和力的人乐于助人,有房好的团队精神 ,能吃苦耐劳.
  155.         积极配合领导的每一项工作.深得领导和同事的.业余时间喜欢看些书充实下自己.
  156.         并参加了西安交通大学的成人高考提升了自己的学历,勤于学习能不断提高自身的能力和
  157.         综合素质,有上进心,具有较强的适应能力,熟悉办公软件,自毕业之后一直在企业担任出纳
  158.         工作.有一定的工作经验.期望从事职业:出纳员,会计文员.期望月薪:面议 目前状况:我目前处于
  159.         离职状态,可立即上岗.</td>
  160.     </tr>
  161.     <tr></tr>
  162.     <tr></tr>
  163.     <tr></tr>
  164.     <tr></tr>
  165.     <tr></tr>
  166.     <tr></tr>
  167.     <tr></tr>
  168.     <tr>
  169.         <td colspan="5" class="zhuTiao"></td>
  171.     </tr>
  172.     <tr>
  173.         <td colspan="5" class="fuTiao">-------教育培训-------</td>
  174.     </tr>
  175.     <tr>
  176.         <td>起止时间</td>
  177.         <td colspan="2">就读院校名称</td>
  178.         <td>主修专业</td>
  179.         <td>学历</td>
  180.     </tr>
  181.     <tr>
  182.         <td>2009.09~2012.07</td>
  183.         <td colspan="2">汕头市林百欣科技中专</td>
  184.         <td>会计电算化</td>
  185.         <td>中专</td>
  186.     </tr>
  187.     <tr>
  188.         <td colspan="5" class="zhuTiao"></td>
  190.     </tr>
  191.     <tr>
  192.         <td colspan="5" class="fuTiao">-------工作经验(1)-------</td>
  193.     </tr>
  194.     <tr>
  195.         <td>就职公司:</td>
  196.         <td colspan="2">深圳市支鹏电器有限公司</td>
  197.         <td>公司行业</td>
  198.         <td>其它</td>
  199.     </tr>
  200.     <tr>
  201.         <td>就职时间:</td>
  202.         <td colspan="2">2011年12月到如今</td>
  203.         <td>就职部分:</td>
  204.         <td>账务部</td>
  205.     </tr>
  206.     <tr>
  207.         <td>公司性质:</td>
  208.         <td colspan="2">其它</td>
  209.         <td>就职职位:</td>
  210.         <td>出纳员</td>
  211.     </tr>
  212.     <tr>
  213.         <td rowspan="5">工作描述</td>
  214.         <td colspan="4" rowspan="5">1.负责办理现金收,付款业务2,银行
  215.         存款,收款,付款工作 3,负责日常费用报销.员工借款给付,保证各项收支
  216.         手续完整,金额准确.4,负责库存现金的保管及盘点.每天登记现金流水账,做到账款
  217.         相符.5,每月准时交水电费,管理费.6,协助会计报税,购买发票等.7,负责公司
  218.         银行账号开办,变更,撤销工作.8,负责公司营业执照,税务登记证等执照的年检工作.
  219.         9,负责印章,合同等的保管工作.10,完成上级领导的其它安排事项.</td>
  220.     </tr>
  221.     <tr></tr>
  222.     <tr></tr>
  223.     <tr></tr>
  224.     <tr></tr>
  225.     <tr></tr>
  226.     <tr>
  227.         <td colspan="5" class="zhuTiao"></td>
  229.     </tr>
  230.     <tr>
  231.         <td colspan="5" class="fuTiao">-------联系方式-------</td>
  232.     </tr>
  233.     <tr>
  234.         <td>联系电话:</td>
  235.         <td colspan="4">134********</td>
  236.     </tr>
  237.     <tr>
  238.         <td>联络手机:</td>
  239.         <td colspan="4">134********</td>
  240.     </tr>
  241.     <tr>
  242.         <td>电子邮箱:</td>
  243.         <td colspan="4">********@163.com</td>
  244.     </tr>
  245.     </tbody>
  246. </table>
  247. </body>
  248. </html>

效果图片

Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post