HTML Table tr td th表格标签元素知识教程

Html 表格目录

1. table表格语法
2. table标签使用说明
3. 使用场景
4. Table tr td th表格使用案例
5. 新建table
6. table标签说明
7. 在线演示

1、语法与结构：   -   TOP

<table> 
    <tr> 
        <td> </td> 
        <td> </td> 
        <td> </td> 
　　</tr> 
</table> 

或者 
 

<table> 
    <tr> 
        <th> </th> 
        <th> </th> 
        <th> </th> 
    </tr> 
</table> 

以上2个表格结构中td和th使用，没有区别均可使用。

2、table标签使用说明：   -   TOP

我们学习DIV+CSS了，不是就完全放弃丢弃table表格布局。想想我们为什么学习DIV CSS其中一个因素，让布局更简单、代码更简单，所以有时候我们也需要table表格来布局。
比如，电子表格型的数据表格。

3、Table表格标签使用场景：   -   TOP

这个是淘宝支付宝页面里任意截的一张表格运用图片：

table 表格标签使用展示

4、Table tr td th表格使用案例：   -   TOP

<table width="300" border="1" cellspacing="0"> 
    <tr> 
        <th>班级</th> 
        <th>日期</th> 
        <th>标题</th> 
    </tr> 
    <tr> 
        <td>一班</td> 
        <td>2012-5-10</td> 
        <td>标题1</td> 
    </tr> 
    <tr> 
        <td>二班</td> 
        <td>2012-5-20</td> 
        <td>标题2</td> 
    </tr> 
</table> 

DW软件里截图：

谷歌浏览器效果截图：

5、DW软件输入表格标签   -   TOP

可以在DW软件中直接输入你要的表格：

第一步：单击DW软件“插入”，然后选择点击“表格（T）”

第二步：在弹出“表格”设置选项卡，设置需要表格，行、列、宽度等属性

第三步：设置完后，点击“确定”，即可在DW输入标准的table表格标签。

6、ThinkCSS对于table表格说明：   -   TOP

1、表格可以在DW输入，拖拽调整
2、table表格实用于多列数据列表
3、学习了DIV CSS还得学习TABLE
4、table会使用灵活运用即可
5、多列数据列表table标签要比使用div css节约代码，任意控制内容排版

7、html表格table在线演示：   -   TOP

http://www.thinkcss.com/yanshi/table-tr-td-th.html

标签(Tag): table 标签 元素 tr td th html表格