码迷,mamicode.com
首页 > Web开发 > 详细

html-表格

时间:2017-02-09 11:04:14      阅读:161      评论:0      收藏:0      [点我收藏+]

标签:--   border   菜谱   color   编号   自动   邮件   row   ges   

案例1:

技术分享

案例2:

技术分享

案例3:

<!Doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<table style="margin:0 auto;text-align:center;line-height:30px" cellspacing="0px" bordercolor="#00F" border="1px" width="600px">
<caption><h1>雇员薪资列表</h1></caption>
<!-- th标签是表头 会自动加粗 -->
<tr>
<th>编号</th>
<th>名字</th>
<th>性别</th>
<th>薪水</th>
<th>职位</th>
<th width="35%">电子邮件</th>
</tr>
<tbody>
<tr>
<td>001</td>
<td>张三</td>
<td>男</td>
<td>2000</td>
<td>流寇</td>
<td>123@lk.com</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>1</td>
<td>2</td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>1</td>
<td>2</td>
<td>1</td>
<td>2</td>
</tr>
</tbody>
</table>
</body>
</html>

表格综合练习-菜谱:

<!Doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<tbody>
<table border="1px" bordercolor="#EEA5FF" width="500px" cellspacing="0px" style="margin:0 auto;line-height:30px;">
<caption><h1>这是一个菜谱</h1></caption>
<tr>
<th colspan="3">菜谱</th>
</tr>
<tr>
<td rowspan="2">素菜</td>
<td>辣炒土豆丝</td>
<td>辣炒腐竹</td>
</tr>
<tr>
<td>辣炒千页豆腐</td>
<td>家常豆腐</td>
</tr>
<tr>
<td rowspan="2">荤菜</td>
<td>小炒肉</td>
<td>水煮肉片</td>
</tr>
<tr>
<td>红烧肉<img src="./hsr.png"></td>
<td>咖喱鸡</td>
</tr>
</table>
</tbody>
</body>
</html>

html-表格

标签:--   border   菜谱   color   编号   自动   邮件   row   ges   

原文地址:http://www.cnblogs.com/chinablog100/p/6380669.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!