HTML表格（table、tr、td、th、thead、tbody、tfoot标签）

最新推荐文章于 2024-06-19 10:23:02 发布

「已注销」

最新推荐文章于 2024-06-19 10:23:02 发布

阅读量3.4w

点赞数 38

分类专栏：前端基础入门 html/html5 文章标签： html

本文链接：https://blog.csdn.net/Allisa_yan/article/details/88427861

版权

前端基础入门同时被 2 个专栏收录

22 篇文章 1 订阅

订阅专栏

html/html5

7 篇文章 1 订阅

订阅专栏

HTML表格
table表格属性

*HTML表格

<!DOCTYPE html>
<html>
<head>
	<title>表格</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>	
     <!--创建2行3列表格 -->
     <table border="1" width="500px">  <!--border：表格边框，width：表格宽度-->
         <caption >表格标题</caption>  <!--标题标签，居中显示，仅有一个标题-->
         <tr>
         	<th>2014年</th> <!--th标签：表格头，内容居中，加粗显示-->
         	<th>2015年</th>
         	<th>2016年</th>
         </tr>
         <tr>
         	<td>8000</td>  <!--td标签：普通表格，内容左对齐-->
         	<td>10000</td>
         	<td>12000</td>         	
         </tr>
     </table>

</body>
</html>

【注意】：浏览器一般是通过加载全部表格数据后才显示，但是当数据量很大时，希望能加载一部分，即显示一部分？？

--- 使用 带结构的表格！！！

三个标签需要同时使用，但是不影响布局展示

**table表格属性：

【说明】：

（1）没有设置width，则按照文字的多少展示表格的大小；

【注意】：如果需要单元格合并？？？---使用跨列属性colspan、rowspan

<table>
         <thead>
         <tr>
            <th rowspan="2">城市</th>
            <th colspan="2">2014年</th>
            <th rowspan="2">2015年</th>
            <th rowspan="2">2016年</th>
         </tr>
         <tr>
            <th>上半年</th>
            <th>下半年</th>
         </tr>
         </thead>
      
         <tbody>
         <tr>
            <td>北京</td>
            <td>8000</td>
            <td>9000</td>
            <td>10000</td>
            <td>12000</td>          
         </tr>
         <tr>
            <td>上海</td>
            <td>6000</td>
            <td>7000</td>
            <td>8000</td>
            <td>10000</td>          
         </tr>
         </tbody>

         <tfoot>
         <tr>
            <td>合计</td>
            <td>7000</td>
            <td>8000</td>
            <td>9000</td>
            <td>11000</td>          
         </tr>
         </tfoot>
</table>

【总结】：

（1）尽量少的使用表格嵌套；

（2）尽量少的使用表格跨行跨列；

详情参考《表格资料》

「已注销」

关注

38
点赞
踩
197

收藏

觉得还不错? 一键收藏
3
评论
HTML表格（table、tr、td、th、thead、tbody、tfoot标签）

目录HTML表格 table表格属性***HTML表格**<!DOCTYPE html><html><head> <title>表格</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></hea...
复制链接

扫一扫