HTML学习之路05-table标签

来源：互联网发布：电路模拟软件中文版编辑：程序博客网时间：2024/06/05 02:10

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>Table 标签</title>    </head>    <body>        <center>员工信息表</center>    <!-- 使文字居中 -->        <br />                      <!-- 换行 -->        <hr color="red" />          <!-- 画一条红色横线 -->        <!-- 制作一个table表格            tr:table row    table的行            td:table data   table的列            th:table head   table的偷                     border:设置表格的边框            align:设置表格的位置       也可以用于行和列设置文字的位置            width:设置表格的宽度    -----宽度和高度既可以用像素如  border=“1px”            height:设置表格的高度  -----也可以用百分比的形式如    width=“50%”,即表格占浏览器的50%         -->        <table border="1px" width="50%" height="30%" align="center">            <thead>                <tr>                        <th>姓名</th>                    <th>性别</th>                    <th>职位</th>                </tr>            </thead>            <tbody align="Center">                <tr>                    <td>张三</td>                    <td>男</td>                    <td>经理</td>                </tr>                <tr>                    <td>李四</td>                    <td>男</td>                    <td>员工</td>                </tr>                <tr>                    <td>王五</td>                    <td>男</td>                    <td>员工</td>                </tr>               </tbody>            <tfoot align="Center">                <tr>                    <td>表脚</td>                    <td>表脚</td>                    <td>表脚</td>                </tr>            </tfoot>        </table>    </body></html>

效果图如下
这里写图片描述

行列合并

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>表合并</title>    </head>    <body>        <!--             行合并：在列标签里添加rowspan                 rowspan="2":合并两行的一列            列合并：colspan         -->        <table border="1" width="50%" height="50%" align="center">            <thead>             </thead>            <tr>                <td>1</td>                <td>2</td>                <td rowspan="2">3</td>            </tr>            <tr>                <td>4</td>                <td>5</td>            </tr>            <tr>                <td colspan="2">7</td>                <td>9</td>            </tr>        </table>    </body></html>

效果图如下
这里写图片描述

阅读全文

0 0