Web前端-Html3--table表格

table表格

能够呈现一个表格

table是最外层 tr表示一行 td表示一列

table常用属性:
border="" 边框宽度默认是0
width="" 表格宽度
height="" 表格高度
align="" center left(默认值) right 表格在页面中的对齐方式
bgcolor="" 当前背景颜色 bgColor="blue"
bordercolor="" 边框颜色 borderColor="red"
cellSpacing="" 每个单元格到周围的距离 cellSpacing="30"
cellPadding="" 单元格内部的内容到单元格边的距离
cellPadding="30"

tr常用属性:
align="" left right center 当前行的文字在单元格中横向对齐方式

valign="" 当前行文字在单元格中纵向对齐方式

top middle bottom

bgcolor="" 当前行的背景颜色

td常用属性:
align="" left right center 当前单元格的文字横向对齐方式

valign="" 当前单元格文字在单元格中纵向对齐方式

top middle bottom

bgcolor="" 当前单元格的背景颜色
width="" 当前单元格宽度会影响当前这一列都变宽
height="" 当前单元格的高度会影响当前这一行都变高

 <table bordercolor="red" border="1"   align="center" width="400" height="200">
    <tr align="right">
        <td>姓名</td>
        <td>年龄</td>
        <td>成绩</td>
    </tr>
    <tr  bgcolor="blue"  valign="top" align="center">
        <td>海柱</td>
        <td>35</td>
        <td>35</td>

    </tr>
    <tr>
        <td width="500">小强</td>
        <td bgcolor="orange">12</td>
        <td valign="bottom" align="right">96</td>


    </tr>



 </table>

细线表格

border-collapse:collapse边框合并

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        table{

            border-collapse:collapse;

        }


    </style>
</head>
<body>
<table bordercolor="green" border="1" width="500" height="300" align="center">
    <!-- tr*4>td*4   tab-->
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>


</table>
    
</body>
</html>

表格标题使用

caption标签是表头标签

放在font中便于使用

th是自动加粗居中表格表头

<table align="center"  border="1" width="400" height="200">
<!-- 专门写表格标题的  比用其他标签方便很多  而且标题也会随着表格位置的变化而变化 -->
    <caption>
    
        <h1>
            <font color="blue">学生成绩登记表</font>
        </h1>
    </caption>
    <tr >
    <!-- 一旦当前行是表格的标题第一行  那么最好使用th替代td作为每一个单元格 -->
        <th>姓名</th>
        <th>年龄</th>
        <th>成绩</th>
    </tr>
    <tr>
        <th>小白白</th>
        <td>12</td>
        <td>85</td>
    </tr>
    <tr>
        <th>小黑</th>
        <td>16</td>
        <td>75</td>
    </tr>



</table>

表格语义化

所谓语义化是让表格的结构更清晰对最后显示效果几乎没有影响
语义化就是标签本身不带有任何样式而只是让结构更清晰

thead tbody tfoot

<table align="center"  border="1" width="400" height="200">

    <caption>
    
        <h1>
            <font color="blue">学生成绩登记表</font>
        </h1>
    </caption>
    <thead>
        <tr >
    
            <th>姓名</th>
            <th>年龄</th>
            <th>成绩</th>
        </tr>

    </thead>
    <tbody>
        <tr>
            <td>小白白</td>
            <td>12</td>
            <td>85</td>
        </tr>
        <tr>
            <td>小黑</td>
            <td>16</td>
            <td>75</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
                <!-- 合并三列 -->
            <td align="right" colspan="3">------数据来自三年二班</td>

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

不规则表格

合并行合并列的表格就是不规则的
合并行: 当前单元格变高了 rowspan="占几行"
合并列: 当前单元格变宽了 colspan="占几列"

<table  width="400" height="400" align="center">
    <tr align="center">
        <td bgcolor="red" colspan="2">1</td>
        <td bgcolor="blue" rowspan="2">2</td>
        
    </tr>
    <tr align="center">
        <td bgcolor="cyan" rowspan="2">4</td>
        <td bgcolor="yellow">5</td>
        
    </tr>
    <tr align="center">
       
        <td bgcolor="orange" colspan="2">8</td>
       
    </tr>


</table>

yanghainan0318

发布了26 篇原创文章 · 获赞 4 · 访问量 435

私信关注