美文网首页
(17.04.07)表格thead、表格的样式

(17.04.07)表格thead、表格的样式

作者: 张不困_ | 来源:发表于2017-10-21 17:05 被阅读0次
    表格:
    父级
        <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"
    

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

    相关文章

      网友评论

          本文标题:(17.04.07)表格thead、表格的样式

          本文链接:https://www.haomeiwen.com/subject/mqoiuxtx.html