zoukankan      html  css  js  c++  java
  • 前端学习(九)表格(笔记)

    表格:
    <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"

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

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



  • 相关阅读:
    网站如何知道浏览器的用户在使用什么语言?
    安装 Couchbase 服务器
    windows Phone 浏览器窗口的尺寸
    【leetcode】 9. palindrome number
    Android Notification实现推送消息过程中接受到消息端有声音及震动及亮屏提示
    UVA 12487 Midnight Cowboy(LCA+大YY)(好题)
    Jenkins——应用篇——插件使用——Publish over SSH
    Linux经常使用命令(三)
    c++引用总结
    quickcocos2dx framework环境变 fatal error C1083: 无法打开源文件:“.Box2D/Dynamics/b2World.h”: No such file or d
  • 原文地址:https://www.cnblogs.com/wxiaoyu/p/9579223.html
Copyright © 2011-2022 走看看