首页 | 技术文章 | 站长日记 | 网络摘文 | 视频收集 | 给我留言 | 一切如此简单
合作&赞助



友情链接
管理员登录
用户名：
密　码：
技术文章 > HTML & XHTML & CSS

HTML 基础教程 【HTML 表格】
Description：公司让弄的一个教程，很基础，顺便也发出来吧。。。。
 HTML表格是HTML中比较重要的部分，表格可以用来布局网页，也可以用来展现内容。
 

<html>

<head><title>表格演示</title></head>

<body>

         <table border="1">

                   <tr>

                            <td>广告主</td>

                            <td>订单号</td>

                   </tr>

                   <tr>

                            <td>dangdang</td>

                            <td>123456</td>

                   </tr>

                   <tr>

                            <td>joyo</td>

                            <td>123456</td>

                   </tr>

         </table>

</body>

</html>
上面的代码就是一个简单的表格。
代码中为方便看到表格的样子，在<table>中加入了 border 属性。设置为1则表示边框大小为1。
综合以前的代码在代码中可以看到表格是用<table>和</table>来表示的。
表格中行是<tr></tr>,单元格是<td></td>。而内容必须放在单元格内，才能显示正常。否则显示在表格外。

再来看一下表格的高级应用。
 

<html>

<head><title>表格演示</title></head>

<body>

         <table border="1" align="center">

                   <tr>

                            <td colspan="2" align="center">订单列表</td>

                   </tr>

                   <tr>

                            <td>广告主</td>

                            <td>订单号</td>

                   </tr>

                   <tr>

                            <td>dangdang</td>

                            <td>123456</td>

                   </tr>

                   <tr>

                            <td>joyo</td>

                            <td>123456</td>

                   </tr>

         </table>

 

         <table border="1" align="center">

                   <tr>

                            <td colspan="2" align="center">商品信息</td>

                   </tr>

                   <tr>

                            <td rowspan="3">

                                     <img src="http://img37.dangdang.com/87/0/20095107-1_t.jpg" />

                            </td>

                   </tr>

                   <tr>

                            <td>商品名称：XX手表</td>

                   </tr>

                   <tr>

                            <td>商品介绍：一块表</td>

                   </tr>

         </table>

</body>

</html>

1. 在上面的代码中，我们看到了2个相对复杂很多的表格。
其实是运用了单元格合并的做法。

rowspan

纵向合并

colspan

横向合并

    横向合并的时候，当前行就可以减少单元格。
    纵向合并的时候，在当前行往下的行都要减少相应位置的单元格。


    代码中还可以看到，<table>,<td>都使用了align属性。这也是它们本身自带的属性。
    <table> 中align 是本身针对网页的位置。
    <td> 中 align 是针对本身内容的位置。

    这里面用到了<img>，图片标签。<img>属于独立标签并不需要</img>结尾。
    代码中我们只用到了img 的一个必要属性，就是src ,它是用于设置图片地址的。
    除了src，<img>还有下面几个属性：

width

是指定图片的宽度，如果不设置则为默认

height

指定图片高度，没有设置则为默认

Border

设置图片边框


2010 © PHPText.Net

使用时间：0.0140790939331 秒