table(表单)

table(表格)
介绍
合并单元格
colspan(横向合并单元格)
rowspan(纵向合并单元格)
长表格
表格的样式
border-spacing(指定边框之间的距离)
border-collapse(设置边框的合并)

将元素设置成单元格实现居中(dispaly:table-cell)
介绍
1、table(表格)可以表示一些格式化数据,例如课程表、人名单、成绩单……


2、在table中使用tr表示表格中的一行,有几个tr就有几行


3、tr中使用td表示一个单元格,有几个td就表示有几个单元格

合并单元格
colspan(横向合并单元格)
示例:

<table>
    <tr>
        <td colspan="2">A</td>
    </tr>
</table>            //一行一列的表格
1
2
3
4
5
6
7
rowspan(纵向合并单元格)
示例:
<table>
    <tr>
        <td rowspan="2">B</td>
    </tr>
</table>            //一行一列的表格

长表格
可以将一个表格分成三个部分

    thead        头部
    
    tbody        主体
    
    tfoot        底部

    th            表示头部的单元格(有一个加粗的效果)

示例:

<table>

    <thead>
        <tr>
            <th>日期</th>
            <th>收入</th>
            <th>支出</th>
            <th>合计</th>
        </tr>
    </thead>

        <tbody>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>

            <tfoot>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </tfoot>
</table>            

表格的样式
border-spacing(指定边框之间的距离)
示例:

    border-spacing:0px;

border-collapse(设置边框的合并)
示例:

    border-collapse:collapse;


1、如果表格中没有使用 tbody ,而是直接使用 tr ,那么浏览器会自动创建一个       tbody ,并且将 tr 全部放到 tbody 中


tr 不是 table 的子元素

2、默认情况下元素在td中是垂直居中的,可以通过vertical-align来修改

将元素设置成单元格实现居中(dispaly:table-cell)
示例:

    .box1{
            width:300px;
            
            height:300px;
            
            background-color:orange;


            `display:table-cell;
            vertical-align:middle;`
        //将元素设置为单元格td,然后设置垂直居中(不推荐用来布局)
    }
————————————————
版权声明:本文为CSDN博主「大毛驴啊」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/softlipaaa/article/details/118579691

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值