当前位置:首页 » 网站运营 » 正文

html表格的基本结构以及写法

2016年05月27日 09:26:30  分类: 网站运营  参与: 678人  点这评论

为什么使用表格
       表格的应用场合

论坛

html表格的基本结构以及写法1

门户

html表格的基本结构以及写法2

网站

html表格的基本结构以及写法3

购物网站表格的特点

简单通用

结构稳定
       表格的基本结构

html表格的基本结构以及写法4

特点:
       同行的高度一致     
       同列的宽度一致
       表格的基本语法


<table>   
<tr>
<td>第1个单元格的内容</td>
<td>第2个单元格的内容</td>
......
</tr>
<tr>
<td>第1个单元格的内容</td>
<td>第2个单元格的内容</td>
......
</tr>
</table>


       <td>…</td> 定义单元格
       <tr>…</tr> 定义行
       <table>...</table>定义表格
       如何创建表格

 

<body>
<table border="2"> 
<tr>  
<td>1行1列的单元格</td>  
<td>1行2列的单元格</td> 
<td>1行3列的单元格</td>
</tr>
<tr> 
<td>2行1列的单元格</td> 
<td>2行2列的单元格</td> 
<td>2行3列的单元格</td>
</tr>
</table>
</body>

html表格的基本结构以及写法5

<table>代表表格的开始,border="2" 表示边框宽度为2
       表格的第1行,有3个单元格,<tr>…</tr>代表行
       表格的第2行,有3个单元格,<tr>…</tr>代表行
       跨行跨列的表格
       什么是跨行跨列的表格

跨多列的表格语法:单元格的横向合并
       <tr>  
       <td colspan="所跨的列数">单元格内容</td>
       </tr>


<table border="2"> 
<tr> 
<td colspan="2">1行1列的单元格</td> 
<td>1行3列的单元格</td>
</tr>
<tr> 
<td>2行1列的单元格</td>
<td>2行2列的单元格</td> 
<td>2行3列的单元格</td>
</tr>
</table>

html表格的基本结构以及写法6

跨多行的:单元格在垂直方向上合并
       <tr>  
       <td rowspan="所跨的行数">单元格内容</td >
       </tr>


<table border="2"> 
<tr> 
<td rowspan="2">1行1列的单元格</td>  
<td>1行2列的单元格</td>
<td>1行3列的单元格</td> 
</tr>
<tr> 
<td>2行2列的单元格</td>  
<td>2行3列的单元格</td>
</tr>
</table>

html表格的基本结构以及写法7

创建跨列表格


<table width="200" border="1">
<tr>   
<td colspan="2">学生成绩</td>
</tr>
<tr> 
<td>语文</td>  
<td>98</td>
</tr>
<tr>   
<td>数学</td> 
<td>95</td>
</tr>

</table>

html表格的基本结构以及写法8

表格宽度为200px,使用height属性设置高度
       设置单元格水平跨2列
       创建跨行表格


<table width="500" border="1">
<tr> 
<td rowspan="2">张三</td> 
<td>语文</td> 
<td>98</td>
</tr>
<tr> 
<td>数学</td> 
<td>95</td>
</tr>
<tr> 
<td rowspan="2">李四</td>
<td>语文</td> 
<td>88</td> 
</tr>
<tr>
<td>数学</td> 
<td>91</td>
</tr>

</table>

html表格的基本结构以及写法9

设置单元格水平跨2行
       创建跨行跨列的表格


<table width="200" border="1">
<tr>
<td colspan="3">学生成绩</td>
</tr> 
<tr>
<td rowspan="2">张三</td> 
<td>语文</td> 
<td>98</td>
</tr>
<tr> 
<td>数学</td>  
<td>95</td> 
</tr>

<tr> 
<td rowspan="2">李四</td> 
<td>语文</td> 
<td>88</td>
</tr>
<tr> 
<td>数学</td> 
<td>91</td>
</tr>

</table>

html表格的基本结构以及写法10

设置单元格水平跨3列
       设置单元格水平跨2行

 

新人必看,HTML代码基本标签(二)

新人必看,HTML代码基本标签(一)


来源:章晓雷博客(微信/QQ号:894331553),转载请保留出处和链接!

本文链接:http://www.zxlblog.com/reed/52.html

本文标签:html表格  

章晓雷博客版权声明:

①凡注明来源的文章,版权均为本站独家所有,转载需注明“来源:章晓雷博客(www.zxlblog.com)”。

②本站注明其他来源的稿件,转载请注明原文来源地址。如若产生纠纷,本站不承担其法律责任。

③ 如本站转载稿件涉及版权等问题,请作者联系博主QQ894331553及时删除或者做相关处理。

<< 上一篇 下一篇 >>

  • 评论(2)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

相关文章

最近更新

Tags

好文分享

热评文章

文章归档

博主空间 | 博主微博 | 原创投稿 | 侵权声明 | 网站地图

Copyright © 2015-2016 ZXLBLOG.COM 版权所有 京ICP备15052414号-1