zoukankan      html  css  js  c++  java
  • html-表格标签

      表格标签可以对数据进行格式化,使数据显示更加清晰

        <table></table>:表示表格的范围
          - border:表格线
          - bordercolor:表格线的颜色
          - cellspacing:单元格之间的距离
          - width:表格的宽度
          - height:表格的高度

        ** 在table里面:<tr></tr>
          - 设置显示方式 aligh:left、center、right
          ** 在tr里面:<td></td>
            - 设置显示方式 aligh:left、center、right
          ** 使用th也可以实现居中和加粗

        * 代码
        <table border="1" bordercolor="blue" cellspacing="0" align="center" width="200" height="100">

        ** 表格的标题
          <caption></caption>

        *分析表格的写法
          - 首先定义一个表格的范围使用table
          - 定义一行使用tr
          - 定义一个单元格使用 td

        ** 操作技巧
          - 首先数有多少行(tr),数每行里面有多少个单元格(td)

        ** 合并单元格
          - rowspan:跨行
          - colspan:跨列

      完整代码:

    <html>
        <head>
            <title>World</title>
        </head>
        <body>
            <!-- 实现3行四列的表格 -->
            <table border="1" bordercolor="blue" cellspacing="0" align="center" width="200" height="100">
                <caption>公司职员信息表</caption>
                <tr align="center">
                    <td>姓名</td>
                    <td>性别</td>
                    <td>年龄</td>
                    <td>职位</td>
                </tr>
                <tr align="center">
                    <td>栗子壳</td>
                    <td></td>
                    <td>20</td>
                    <td>老总</td>
                </tr>
                <tr>
                    <th>栗子米</th>
                    <th></th>
                    <th>19</th>
                    <th>秘书</th>
                </tr>        
            </table>
        </body>
    </html>
    <html>
        <head>
            <title>World</title>
        </head>
        <body>
            <!--
            测试跨列
            第一行:1
            第二行到第四行:3
            -->
            <table border="1" cellspacing="0" bordercolor="blue" width="200">
                <tr>
                    <td colspan="3" align="center">人员信息</td>
                </tr>
                <tr>
                    <td>岳不群</td>
                    <td></td>
                    <td>40</td>
                </tr>
                <tr>
                    <td>令狐冲</td>
                    <td></td>
                    <td>25</td>
                </tr>
                <tr>
                    <td>东方不败</td>
                    <td></td>
                    <td>24</td>
                </tr>
            </table>
            <hr/>
            <!--
            测试跨行
            第一行:3
            第二行到第三行:2
            -->
            <table border="1" cellspacing="0" bordercolor="blue" width="200">
                <tr>
                    <td>岳不群</td>
                    <td></td>
                    <td rowspan="3" align="center">40</td>
                </tr>
                <tr>
                    <td>令狐冲</td>
                    <td></td>
                </tr>
                <tr>
                    <td>东方不败</td>
                    <td></td>
                </tr>
            </table>
        </body>
    </html>
  • 相关阅读:
    problem in Sourcetree
    Get started with Sourcetree
    IIS application pool access desktop denied
    结构型模式 适配器模式
    结构型模式 装饰模式
    结构型模式 代理模式
    创建型模式 原型模式
    创建型模式 建造者模式
    创建型模式 抽象工厂
    设计模式的六大原则
  • 原文地址:https://www.cnblogs.com/ibabyli/p/9882388.html
Copyright © 2011-2022 走看看