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

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

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

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



原文地址:https://www.cnblogs.com/wxiaoyu/p/9579223.html