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"

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

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



  • 相关阅读:
    plsql excel导入报错:未发现数据源名称并且未指定默认驱动程序
    exception java.lang.IndexOutOfBoundsException: Index: 0, Size: 0
    Android DiskLruCache 源代码解析 硬盘缓存的绝佳方案
    uestc 360(区间合并)
    UI_UITabBarController
    【C++ Primer】用于大型程序的工具
    Java 从基础到进阶学习之路---类编写以及文档凝视.
    Android 项目的代码混淆,Android proguard 使用说明
    android:Activity四种启动模式简单介绍
    已有数据库(单机)部署Database Vault
  • 原文地址:https://www.cnblogs.com/wxiaoyu/p/9579223.html
Copyright © 2011-2022 走看看