您的位置：首页 > Web前端 > HTML

html标签(3)--表格

2013-03-20 16:37 253 查看
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>

<style title="text/css">

table {
border:solid 1px blue;
}

td {
border:solid 1px red;
}
/* 如何通过css控制表格的边框，样式*/

table {
border-collapse:separate;
/*border-collapse:collapse;*/ /* 边框融合*/

/*下面这两种属性受border-collapse影响
在border-collapse:separate;时才有效果*/
border-spacing:5px;
empty-cells:hide; /* 空单元格不显示*/
}

</style>

</head>

<body>
<p>表格中最重要的两个元素行与列 <br />
一张表--table <br />
table有一行或多行--row--tr <br />
一行又可能分一列或多列--column--td
</p>

<table border="1">
<tr><td>姓名</td><td>年龄</td><td>身高</td></tr>
<tr><td>刘备</td><td>28</td><td>175</td></tr>
<tr><td>关羽</td><td>25</td><td>190</td></tr>
<tr><td>张飞</td><td>23</td><td></td></tr>
</table>

<p>
这是一个最基本的表格，
更重要的还有列的合并，行的合并，列与行都合并这种情况
</p>

<p>表格列的合并</p>
<table border="1">
<tr><td colspan="3">姓名</td></tr>
<tr><td>姓名</td><td>年龄</td><td>身高</td></tr>
<tr><td>刘备</td><td>28</td><td>175</td></tr>
<tr><td>关羽</td><td>25</td><td>190</td></tr>
<tr><td>张飞</td><td>23</td><td>180</td></tr>
</table>

<p>表格行的合并</p>
<table border="1">
<tr><td colspan="3">姓名</td></tr>
<tr><td>姓名</td><td>年龄</td><td>身高</td></tr>
<tr><td>刘备</td><td>28</td><td rowspan="3">180</td></tr>
<tr><td>关羽</td><td>25</td></tr>
<tr><td>张飞</td><td>23</td></tr>
</table>

<p>表格合并列合并行的小技巧 <br />
先把合并后要消失的td删除掉 <br />
数一数留下的td要跨几行或几列 <br />
再通过rowspan="N",或者colspan="N" <br />
</p>

<p>如何通过css控制表格的边框，样式</p>

<table>
<tr><td>姓名</td><td>年龄</td><td>身高</td></tr>
<tr><td>刘备</td><td>28</td><td>175</td></tr>
<tr><td>关羽</td><td>25</td><td>190</td></tr>

<p>
<ul>
<li>表格的达标要求</li>
<li>做一个3行3列基本表格</li>
<li>在上述表格基础上，完成列的合并</li>
<li>再完成行的合并</li>
<li>要能用css来控制表格的边框，以及边框的整合效果</li>
</ul>

<ul>
<li>无序及有序列表的达标要求</li>
<li>知道无序及有序列表的显示效果的区别</li>
<li>能用无序列表+float制作一个导航</li>
</ul>
</p>
</body>
</html>

/**
燕十八 公益PHP培训
课堂地址:YY频道88354001
学习社区:www.zixue.it
**/
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航