• 前端学习(九)表格(笔记)


    表格:
    <table>----表格父级
        <thead>---表头
            <tr>-----------一行
                <th>1</th>-------表头里一行中的一列
                <th>2</th>
                <th>3</th>
                <th>4</th>
            </tr>
        </thead>
        <tbody>----表身
            <tr>
                <td>1</td>----一行里的一列
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
        </tbody>
        <tfoot>----表尾
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
        </tfoot>
    </table>    

    关于表格的样式:

     border-collapse:collapse; ---加给table,作用合并表格border(只是把boder重叠在一起!)

    关于与表格的私有属性
    <thead>
        <tr>
            <th colspan="5">课程表</th>
        </tr>
    </thead>

    colspan="5"----横向单元格合并!

    里面的数字5代表占5格!

    <tr>
        <td rowspan="2">1</td>
        <td>2</td>
        <td rowspan="3">3</td>
        <td>4</td>
        <td>5</td>
    </tr>
    <tr>
        <td rowspan="2">2</td>
        <td>4</td>
        <td>5</td>
    </tr>
    <tr>
        <td>1</td>
        <td>4</td>
        <td>5</td>
    </tr>

    rowspan="2" ----纵向单元格合并

    里面数字代表上下俩行对应的单元格个数!

    =========================================================

    注意:
        1.在改变表格的宽高的时候,改变上面的宽,下面(一列)对应的地方也会随之改变,但是高不会!
        2.在改变表格的宽高的时候,改变左面的高,右边的表格也会随之变高!

    总结:一行里面会随着第一个表格的高度而变高,一列里面会随着它的宽度而变宽!


    给表格里面设置宽高:
        
        俩写法:
            css:
                给表格起class,直接给class名加样式
            属性:
                直接给表格添加私有属性:width=“100”


    ----------------------------------------------------------

    给表格内部的文字设置左中右:

        俩写法:
            css:
                起class

                text-align:left/center/right;

            属性:
                align="left/center/right"



    给表格内部的文字设置上中下:

        俩写法:
            css:
                起class

                 vertical-align:top/middle/bottom;

            属性:
                 valign="top/middle/bottom"

    =========================================================

    注意:
        最简单的表格可以只有表身



  • 相关阅读:
    个人心情闲扯贴~~
    近阶段学习感悟--大一下半学期
    HDU 1003 Max Sum 解题报告
    开始我的新园地--献给我的那些学长们
    软件公司职位简称
    Sql Server参数化查询之where in和like实现详解 [转]
    21个值得收藏的Javascript技巧
    [转]js刷新父窗体
    Oracle10g 连接 sqlserver 在server2008r2 中连接 iis7 .net4.0
    Oracle10g 连接 sqlserver hsodbc dblink 方式 非透明网关
  • 原文地址:https://www.cnblogs.com/wxiaoyu/p/9579223.html
Copyright © 2020-2023  润新知