UPUPD技术论坛

标题: 【HTML基础】-3.5-table标签,认识网页上的表格 [打印本页]

作者: 洛尘    时间: 2015-10-15 15:03
标题: 【HTML基础】-3.5-table标签,认识网页上的表格
有时候我们需要在网页上展示一些数据,如某公司想在网页上展示公司的库存清单。

创建表格的四个元素:

table、tbody、tr、th、td

1.<table>...</table>:整个表格以<table>标记开始、</table>标记结束。

2.<tbody>...</tbody>:当表格内容非常多时,表格会下载一点显示一点,但如果加上<tbody>标签后,这个表格就要等表格内容全部下载完才会显示。如下面的代码。

3.<tr>...</tr>:表格的一行,所以有几对tr表格就有几行。

4.<td>...</td>表格的一个单元格,一行中包含几对<td>...</td>,说明一行中就有几列。


5.<th>...</th>:表格的头部的一个单元格,表格表头。


6.表格中列的个数,取决于一行中数据单元格的个数。


任务:
  1. <html>
  2.                 <head>
  3.                         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  4.                         <title>认识table表标签</title>
  5.                 </head>
  6.                 <body>
  7.                         <table>
  8.                           <tbody>
  9.                             <tr>
  10.                               <th>班级</th>
  11.                               <th>学生数</th>
  12.                               <th>平均成绩</th>
  13.                             </tr>
  14.                             <tr>
  15.                               <td>一班</td>
  16.                               <td>30</td>
  17.                               <td>89</td>
  18.                             </tr>
  19.                             <tr>
  20.                               <td>二班</td>
  21.                               <td>35</td>
  22.                               <td>85</td>
  23.                             </tr>
  24.                           </tbody>
  25.                         </table>
  26.                 </body>
  27.                 </html>
复制代码


在上面的代码中插入以下代码:


  1. <tr>
  2. <td>三班</td>
  3. <td>32</td>
  4. <td>80</td>
  5. </tr>
复制代码







欢迎光临 UPUPD技术论坛 (http://bbs.upupd.com/) Powered by Discuz! X3.2