博客列表 >HTML实现表格制作

HTML实现表格制作

JUNL的博客1111
JUNL的博客1111原创
2018年03月27日 20:01:412124浏览

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="10" align="center" width="60%">
    <caption><h2>越战越勇报名表<small><a href="">添加</a></small></h2></caption>

    <thead>
    <tr bgcolor="#ffe4c4">
<th colspan="2">姓名信息</th>
        <th colspan="3">个人信息</th>
        <th colspan="2" rowspan="2" >操作</th>

<tr bgcolor="aqua">
    <th>序号</th>
    <th>姓名</th>
    <th>年龄</th>
    <th>学历</th>
    <th>工作</th>


</tr>
    </thead>
<tbody align="center">
<colgroup span="1" bgcolor="red"></colgroup>
<colgroup span="1" bgcolor="pink"></colgroup>
<colgroup span="3" bgcolor="grey"></colgroup>
<colgroup span="2" bgcolor="orange"></colgroup>
<tr align="center">
    <td>1</td>
    <td align="left"><img src="../image/001.jpg" width="30">张明</td>
    <td >24</td>
    <td >高中</td>
    <td >快递</td>
    <td ><a href="">操作</a></td>
    <td ><a href="">删除</a></td>

</tr>
<tr align="center">
    <td>2</td>
    <td align="left"><img src="image/001.jpg" width="30">王林</td>
    <td>33</td>
    <td>大学</td>
    <td>经理</td>
    <td><a href="">操作</a></td>
    <td><a href="">删除</a></td>

</tr>
<tr align="center">
    <td>3</td>
    <td align="left"><img src="../image/001.jpg" width="30">刘红</td>
    <td>25</td>
    <td>大学</td>
    <td>前台</td>
    <td><a href="">操作</a></td>
    <td><a href="">删除</a></td>

</tr>
<tr align="center">
    <td>4</td>
    <td align="left"><img src="../image/001.jpg" width="30">王丽</td>
    <td>30</td>
    <td>初中</td>
    <td>工地</td>
    <td><a href="">操作</a></td>
    <td><a href="">删除</a></td>

</tr>
<tr align="center">
    <td>5</td>
    <td align="left"><img src="../image/001.jpg" width="30">李红</td>
    <td>40</td>
    <td>研究生</td>
    <td>事业单位</td>
    <td><a href="">操作</a></td>
    <td><a href="">删除</a></td>

</tr>
    </tbody>

</table>
<p align="center">
<a href="">首页</a>
<a href="">1</a>
<a href="">2</a>
<a href="">...</a>
</p>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议