zoukankan      html  css  js  c++  java
  • 关于table

     
    # table 属性bgcolor:设置表格的背景颜色 #
    <!--属性bgcolor:设置表格的背景颜色-->

      <table border="1" bgcolor="red">
        <tr>
            <td>
                测试数据
            </td>
        </tr>
        <tr>
            <td>
                测试数据
            </td>
        </tr>
      </table>

      <!--属性cellpadding:设置表格内容与边框的距离,如果设置了padding:0时,则无效,产生冲突-->
      <table border="1" bgcolor="red" cellpadding="60">
            <tr>
                <td>
                    测试数据
                </td>
            </tr>
            <tr>
                <td>
                    测试数据
                </td>
            </tr>
      </table>

    # table属性cellspacing:设置列间距 
    <!--属性cellspacing:设置列间距  -->
      <table border="1" bgcolor="red" cellspacing="10">
            <tr>
                <td>
                    测试数据
                </td>
                <td>测试数据</td>
            </tr>
            <tr>
                <td>
                    测试数据
                </td>
                <td>
                    测试数据
                </td>
            </tr>
      </table>

    # table CSS 样式中使用border-spacing 来设置相邻单元格边框之间的距离 
    <!--CSS使用border-spacing 来设置相邻单元格边框之间的距离-->
      <table border="1" bgcolor="red" style="border-spacing: 20px">
            <tr>
                <td>
                    测试数据
                </td>
                <td>测试数据</td>
            </tr>
            <tr>
                <td>
                    测试数据
                </td>
                <td>
                    测试数据
                </td>
            </tr>
      </table>

    # table CSS 样式中使用border-collapse合并一个单一边框 #
    <!-- CSSborder-collapse合并一个单一边框 -->
      <table border="1" style="border-collapse: collapse" bgcolor="red">
            <tr>
                <td>
                    测试数据
                </td>
                <td>测试数据</td>
            </tr>
            <tr>
                <td>
                    测试数据
                </td>
                <td>
                    测试数据
                </td>
            </tr>
          
      </table>

    # table CSS 样式中使用table-layout:fixed;固定宽度 #
    <!--table-layout:fixed;固定宽度为200,里面字体自动换行-->
      <table border="1" style="table-layout:fixed;200px;border-collapse: collapse" bgcolor="red">
            <tr>
                <td>
                    测试数据测试数据测试数据测试数据测试数据
                </td>
                <td>测试数据测试数据测试数据测试数据</td>
            </tr>
            <tr>
                <td>
                    测试数据测试数据
                </td>
                <td>
                    测试数据测试数据测试数据
                </td>
            </tr>
          
      </table> 
     

    # table CSS 样式中使用table-layout:auto;相对宽度 #
    <!--table-layout:auto;相对宽度,自适应-->
      <table border="1" style="table-layout:auto;200px;border-collapse: collapse" bgcolor="red">
            <tr>
                <td>
                    测试数据测试数据测试数据测试数据测试数据
                </td>
                <td>测试数据测试数据测试数据测试数据</td>
            </tr>
            <tr>
                <td>
                    测试数据测试数据
                </td>
                <td>
                    测试数据测试数据测试数据
                </td>
            </tr>
          
      </table>
     
     
     
     
    DISPLAY用法:


     # 对span设置宽高是无效的 #

        <span style="border:1px solid red;height: 100px; 100px">测试数据</span>
        <span style="border:1px solid red;height: 100px; 100px">测试数据</span>
        <br/>
        <br/>


       #把span转换成块级元素,就可以对其设置宽和高,可以看到已自动换行 #


        <span style="border:1px solid red;display: block;height: 100px; 100px">测试数据</span>
        <span>测试数据</span>
        <span>测试数据</span>

        <div style="border:1px solid red;height: 100px; 100px">测试数据</div>
        <br/>


    # 把div转换成内嵌元素,不能再对其设置宽和高 #
        <div style="display: inline;height: 100px">测试数据</div>
        <div>测试数据</div>
        <!--把div转换成内嵌元素,但是还是具有一些块级元素的功能,比如宽和高-->
        <div style="border:1px solid red;display: inline-block;height: 100px">测试数据</div>
     
     
     
    #  关于position #

    <div style="border:1px solid black;height: 500px; 500px">

            <!--使用position:relative;是相对于自身进行定位,还是在常规流里,不会对其他元素造成影响-->
            <div style="position:relative;border:1px solid red;background-color:blue;height: 100px; 100px"></div>
            <div style="border:1px solid black;height: 100px; 100px"></div>
            
            <!--使用position:absolute;使div拖离常规流,以离他最近的父级元素拥有position为准-->
            <div style="z-index:1;position:absolute;border:1px solid black;background-color:blueviolet;height: 100px; 300px"></div>
            <div style="z-index:2;border:1px solid black;height: 200px; 100px"></div>
        </div>
     
  • 相关阅读:
    一起来学SpringBoot(十七)优雅的参数校验
    使用JDBC创建出版社和书籍管理系统
    springMvc(初识+操作步骤)
    模拟Java-Sping,实现其IOC和AOP核心
    python多个装饰器的执行顺序
    JAVA——不简单的fianl关键字
    Java HTTP 组件库选型看这篇就够了
    这一次,我连 web.xml 都不要了,纯 Java 搭建 SSM 环境!
    13数据结构与算法分析之---链式栈
    12数据结构与算法分析之---顺序栈
  • 原文地址:https://www.cnblogs.com/muqnly/p/4771685.html
Copyright © 2011-2022 走看看