表格的属性

1、 <!-- table表示表格的整体 -->
             <!-- tr表示表格的每一行 -->                             2、 cellspacing="0"   表格线宽 宽度变为正常
             <!-- td表示表格的单元格 -->               

             <!-- caption:表格整体的大标题 -->                                                                          
             <!-- th:表头单元格,表格一列的小标题 -->

        4、<table border="1" width="300" height="300">                3、 跨行合并(rowspan)或者跨列合并(colspan
             <caption><h3>学生成绩单</h3></caption>
          <tr>
                   <th>姓名</th>
                   <th>成绩</th>
                   <th>评语</th>
         </tr>

         5、 <!-- thead:表示表格的头部 -->
               <!-- tbody:表示表格的主体 -->
               <!-- tfoot:表示表格的底部 -->

         <table border="1" width="300" height="300">       rowspan 跨行合并
           <caption><h3>学生成绩单</h3></caption>         colspan   跨列合并
             <!-- 表格的头部 -->
       <thead>
          <tr>
             <th>姓名</th>
            <th>成绩</th>
           <th>评语</th>
          </tr>
    </thead>

CSS属性应用的HTML元素描述示例值
border<table><th><td>设置边框的宽度、样式和颜色1px solid black
border-collapse<table>设置表格边框是否合并为单一边框collapse 或 separate
border-spacing<table>设置表格单元格之间的间距(当border-collapseseparate时有效)10px
width<table>设置表格的宽度100% 或 500px
height<table>(不常用)设置表格的高度(通常不用于表格布局,因为表格高度由内容决定)200px(不常用)
background-color<table><tr><th><td>设置背景颜色#f0f0f0
color<table><th><td>设置文本的颜色#333333
font-size<table><th><td>设置文本的字体大小16px
text-align<th><td>设置文本的水平对齐方式leftcenterright
vertical-align<tr><th><td>设置文本的垂直对齐方式topmiddlebottom
padding<th><td>设置内容与边框之间的内边距10px 或 5px 10px(上下5px,左右10px)
margin<table>(不常用)设置外边距(通常不用于表格,因为表格是块级元素且自动占据一行)20px(不常用)
border-radius<table><th><td>设置边框的圆角半径5px 或 10px 10px 0 0(左上角和右上角10px,右下角和左下角0px)
box-shadow<table>为表格添加阴影效果2px 2px 5px rgba(0, 0, 0, 0.3)
caption-side<table>(不常用)设置表格标题的位置(相对于表格),但HTML5中不常用,且可能不被所有浏览器支持top 或 bottom
empty-cells<table>(不常用)设置是否显示空单元格的边框,但HTML5中不常用,且可能不被所有浏览器支持show 或 hide
table-layout<table>设置表格的布局方式auto 或 fixed
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值