HTML5 第七章 表格
Dome 01 表格
<html>
<head>
<title>表格</title>
</head>
<body>
<h3>表格案例</h3>
<table width="600" height="100" align="center" border="1"
bordercolor="#339900" cellspacing="2" cellpadding="2"
bgcolor="#0033FF" background="images/3.jpg">
<caption>表格的标题</caption>
<tr>
<th>表格的表头一</th>
<th>表格的表头二</th>
</tr>
<tr>
<td>这是表格中的第一个单元格</td>
<td>第一行中的第二个单元格</td>
</tr>
<tr>
<td>这是表格的第二行</td>
<td>第二行中的第二个单元格</td>
</tr>
</table>
</body>
</html>
//align对其有left左对齐，center居中对齐，right右对齐
//border 边框 单位像素 默认值为0，不显示
//bordercolor 默认颜色灰色
//cellspacing 内框宽度：单元格间的宽度 单位像素
//cellpadding 文字与边框的间距 单位像素
//bgcolor 背景颜色
//background 背景图像
Dome 02 行
<html>
<head>
<title>无标题文档</title>
</head>
<body>
<h3>行案例</h3>
<table border="1" bordercolor="#00CC33" cellpadding="5" height="200">
<caption align="bottom">某公司员工工资</caption>
<tr height="300" bgcolor="#33FFFF"> //无变化
<th>姓名</th>
<th>基本工资</th>
<th>岗位工资</th>
<th>绩效工资</th>
<th>工龄工资</th>
</tr>
<tr bordercolor="#FF0000" valign="top">
<td>李1</td>
<td>1000</td>
<td>600</td>
<td>800</td>
<td>400</td>
</tr>
<tr align="right">
<td>王2</td>
<td>1500</td>
<td>800</td>
<td>600</td>
<td>300</td>
</tr>
</table>
</body>
</html>
//valign 垂直对齐 top靠上 middle居中 bottom靠下
//align 表格标题对齐 top靠上 bottom靠
Dome 03 单元格
<html>
<head>
<title>无标题文档</title>
</head>
<body>
<h3>单元格案例</h3>
<table width="500" border="1" bordercolor="#00CC33" cellpadding="5">
<caption align="bottom">某公司员工工资</caption>
<tr align="center">
<td colspan="5">工资单</td>
</tr>
<tr height="60"> //无变化
<th width="60" height="60">姓名</th>
<th>基本工资</th>
<th>岗位工资</th>
<th>绩效工资</th>
<th>工龄工资</th>
</tr>
<tr bordercolor="#FF0000" valign="top">
<td>李1</td>
<td width="100" height="40">1000</td>
<td>600</td>
<td bordercolorlight="#0000FF">800</td>
<td bordercolordark="#FFFF00">400</td>
</tr>
<tr>
<td rowspan="2">王2</td>
<td>1500</td>
<td>800</td>
<td bordercolor="#0000FF">600</td>
<td bgcolor="#CC0033">300</td>
</tr>
<tr>
<td height="50">1200</td>
<td align="center">800</td>
<td valign="bottom">600</td>
<td background="images/1.jpg">300</td>
</tr>
</table>
</body>
</html>
//colspan 水平跨度
//rowspan 垂直跨度
//bordercolorlight 亮边框：右边和底部变色
//bordercolordark 暗边框：左边和上边变色
Dome 04 表格的结构
<body>
<h3>表格的结构</h3>
<table align="center" border="1" bordercolor="#FFCC99" cellpadding="3" width="550" height="180">
<caption>某单位物品管理表</caption>
<thead bgcolor="#FF0000" align="center" valign="middle">
<tr>
<th>物品名</th>
<th>类型</th>
<th>领取人</th>
<th>所属部门</th>
<th>数量</th>
</tr>
</thead>
<tbody bgcolor="#CC99CC" align="left" valign="bottom">
<tr>
<td>圆珠笔</td>
<td>文具</td>
<td>李小米</td>
<td>PHP</td>
<td>1</td>
</tr>
<tr>
<td>鼠标</td>
<td>电脑配件</td>
<td>潘晓东</td>
<td>ASP.NET</td>
<td>2</td>
</tr>
<tr>
<td>打印纸</td>
<td>办公耗材</td>
<td>刘小欣</td>
<td>JAVA</td>
<td>30</td>
</tr>
</tbody>
<tfoot bgcolor="#993300" align="right" valign="middle">
<tr>
<td colspan="5">表格创建日期：2011-11-20</td>
</tr>
</tfoot>
</table>
</body>
</html>
Dome 05 表格嵌套
<body>
<!--表格嵌套 -->
<table width="560" height="300" border="1" cellpadding="0" align="center">
<thead bgcolor="66FFFF">
<tr height="70">
<td width="160">网站logo</td>
<td width="400">网站banner</td>
</tr>
</thead>
<tbody>
<tr valign="top" height="200">
<td width="160" align="center">
<table width="135" height="180" border="1" cellspacing="0" bgcolor="#FFCCFF">
<tr>
<td>页面导航一</td>
</tr>
<tr>
<td>页面导航二</td>
</tr>
<tr>
<td>页面导航三</td>
</tr>
<tr>
<td>页面导航四</td>
</tr>
</table>
</td>
<td width="400" height="200" background="images/1.jpg">
<table width="380" height="160" border="1" bordercolor="#CC9933" cellspacing="2" cellpadding="5">
<tr>
<td>网站板块一</td>
<td>网站板块二</td>
</tr>
<tr>
<td>网站板块三</td>
<td>网站板块四</td>
</tr>
</table>
</td>
</tbody>
<tfoot bgcolor="#66FFFF">
<tr align="center">
<td height="30" colspan="2"><font color="#FF0000">版权信息</font></td>
</tr>
</tfoot>
</table>
</body>
</html>
转载请注明原文地址: https://ju.6miu.com/read-1202027.html
