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>
  • 相关阅读:
    android.database.CursorIndexOutOfBoundsException: Index -1 requested, with a size of 3
    display:inline-block的运用
    图解单片机8位PWM、16位PWM中“位”的含义!
    UVA10006
    [置顶] CF 86D Powerful array 分块算法入门,n*sqrt(n)
    俗人解释 三维渲染 在工作过程
    HDU 4414 Finding crosses(dfs)
    Codeforces 35E Parade 扫描线 + list
    hdu 4374 单调队列
    LeetCode OJ平台Sort Colors讨论主题算法
  • 原文地址:https://www.cnblogs.com/ibabyli/p/9882388.html
Copyright © 2011-2022 走看看