HTML表格_动力节点Java学院整理
发布时间：2017-06-20 10:30:52 作者：perlman 
我要评论
我要评论在html中绘制表格使用table标签，tr表示行，td表示列,下面通过代码实例给大家介绍HTML表格的相关知识，感兴趣的朋友一起看看吧
在html中绘制表格使用table标签
- tr表示行
- td表示列
- th表示表头，表头通常用于列名字。
下面是一个列子。
<html>
<head>
<title>Table in html</title>
</head>
<body>
<p>水平表头</p>
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
<tr>
<td>zdd</td>
<td>30</td>
<td>male</td>
</tr>
</table>
<p>垂直表头</p>
<table border="1">
<tr>
<th>Name</th>
<td>autumn</td>
</tr>
<tr>
<th>Age</th>
<td>30</td>
</tr>
<tr>
<th>Gender</th>
<td>famale</td>
</tr>
</table>
</body>
</html>
效果图
水平表头
|
Name
|
Age
|
Gender
|
|
zdd
|
30
|
male
|
垂直表头
|
Name
|
autumn
|
|
Age
|
30
|
|
Gender
|
famale
|
无边框表格
如果在定义表格时，没有指定border属性，那么表格就没有边框
<table>
<tr><td>zdd</td><td>30</td></tr>
<tr><td>ddz</td><td>27</td></tr>
</table>
效果图
|
zdd
|
30
|
|
ddz
|
27
|
空单元格
如果没有为单元格指定内容，那么单元格将是空的，且没有边框，如下，这样很不美观。
|
zdd
|
30
|
|
|
27
|
如果解决呢？方法是给空的单元格加上空格，由于html忽略多余的空格，所以我们不能直接加空格，而要加 nbsp表示空格。
<table border="1">
<tr><td>zdd</td><td>30</td></tr>
<tr><td> </td>20</tr>
</table>
效果图
|
zdd
|
30
|
|
|
20
|
带标题的表格
使用caption属性，但是好像标题中不能有空格，否则显示的时候会换行！
<table border="1">
<caption>我的表格</caption>
<tr><td>zdd</td><td>30</td></tr>
<tr><td> </td><td>20</td></tr>
</table>
我的表格
|
zdd
|
30
|
|
|
20
|
跨行或者跨列的表格
用colspan跨行
<table border="1"> <tr><th>姓名</th><th colspan="2">电话</th></tr> <tr><td>Bill Gates</td><td>555 77 854</td><td>555 77 855</td></tr> </table>
|
姓名
|
电话
|
|
|
Bill Gates
|
555 77 854
|
555 77 855
|
用rowspan跨列
<table border="1"> <tr><th>姓名</th><td>Bill Gates</td></tr> <tr><th rowspan="2">电话</th><td>555 77 854</td></tr> <tr><td>555 77 855</td></tr> </table>
嵌套的表格
table标签是可以嵌套的，也就是说在tr或者td标签中加入table标签即可创建表格中的表格。
相关文章
- 这篇文章主要介绍了HTML图片img标签的相关资料,需要的朋友可以参考下2017-06-21
- 什么是HTML锚点，锚点应该如何用？这篇文章主要为大家详细介绍了HTML中锚点的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-21
- 这篇文章主要介绍了HTML中div和span比较，分别介绍了div和span的用法和比较，有兴趣的可以了解一下2017-06-21
- HTML是超文本标记语言,是一种用来制作超文本文档的简单标记语言，本文详细的介绍了html的发展和基本概念，有兴趣的可以了解一下2017-06-21
- HTTP/1.1 协议规定的 HTTP 请求方法有 OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE、CONNECT 这几种。其中 POST 一般用来向服务端提交数据，本文主要讨论 POST 提交数据2017-06-21
- <a>是超链接标签，什么是超链接呢？这篇文章主要介绍了HTML超链接a标签的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-21
这篇文章主要介绍了HTML常用格式标签的相关资料,需要的朋友可以参考下2017-06-20- 什么是HTML？什么是超链接?这篇文章主要为大家详细介绍了HTML的最基础资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-21
- HTML是创建网页的基础语言,如果不了解HTML就谈不上网页设计。以下是关于HTML基本结构入门知识的讲解2017-06-20
- 一个浏览器文档窗口只能显示一个网页文件，但是可以通过使用框架，在同一个浏览器窗口中显示不止一个页面，本文就来介绍一下HTML框架2017-06-20
最新评论