208、html---标签之表格标签

最新推荐文章于 2022-02-17 15:39:22 发布

l0510402015

最新推荐文章于 2022-02-17 15:39:22 发布

阅读量148

点赞数

分类专栏： 04_html

本文链接：https://blog.csdn.net/l0510402015/article/details/104367199

版权

04_html 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

表格标签：
    html行、列概念，只有表、行、单元格
    * <table>:定义表格(下面除了border属性外，其它属性在html5中都已经过时，后期配合css实现这些属性)
        * border:边框
        * width:宽度
        * cellpadding:定于单元格内容和单元格的距离
        * cellspacing:定义单元格之间的距离。如果指定为0，则单元格的线会合为一条
        * bgcolor:背景色
        * align:整个表格相对页面的对齐方式
    * <tr>:定义行
        * bgcolor:背景色
        * align:文字对齐方式
    * <td>:定义单元格
        * colspan:合并列
        * rowspan:合并行
    * <th>:定义该单元格为表头
    * <caption>:表格标题
    * <thead>:表示表格头部分，主要用于指示，没有样式，后期结合css一起作用
    * <tbody>:表示表格体部分，主要用于指示，没有样式，后期结合css一起作用
    * <tfoot>:表示表格脚部分，主要用于指示，没有样式，后期结合css一起作用
    举例：

<body>
<!--表-->
    <table border="1">
<!--        定义表格名称-->
        <caption> 学生信息表</caption>
<!--        行-->
        <tr>
<!--        表头-->
            <th>序号</th>
            <th>姓名</th>
            <th>分数</th>
        </tr>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>70</td>
        </tr>
            <td>2</td>
            <td>李四</td>
            <td>80</td>
        </tr>

    </table>
</body>

如果把table设置如下属性：

<table border="1" width="200" bgcolor="#7fffd4" cellspacing="0" align="center">

如果对第二行设置如下属性：

<tr bgcolor="blue" align="center">

在excel里面的合并列、行，在html里面不叫合并，而只是表示这行有多少个单元格

<body>
<!--表-->
    <table border="1" width="200" bgcolor="#7fffd4" cellspacing="0" align="center">
<!--        定义表格名称-->
        <caption> 学生信息表</caption>
<!--        行-->
        <tr>
<!--        表头-->
            <th rowspan="2">序号</th>
            <th>姓名</th>
            <th>分数</th>
        </tr>
        <tr bgcolor="blue" align="center">
            <td>1</td>
            <td>张三</td>
            <td>70</td>
        </tr>
            <td>2</td>
            <td colspan="2" >李四</td>
            <td>80</td>
        </tr>

    </table>
</body>