html教程

定义和用法

<table> 标签可定义表格。在 <table> 标签内部，你可以放置表格的标题、表格行、表格列、表格单元以及其他的表格。

 

HTML 4.01 与 HTML 5 之间的差异

在 HTML 4.01 中，不赞成使用 "align" 和 "bgcolor" 属性。

在 HTML 5 中，不支持 <table> 标签的任何属性。

 

例子 

<table> 
<tr> 
<td>Cell A</td> 
<td>Cell B</td> 
</tr> 
</table>

 

属性

标准属性

class, contenteditable, contextmenu, dir, draggable, id, irrelevant, lang, ref, registrationmark, tabindex, template, title

如需完整的描述，请访问 HTML 5 中标准属性。

 

事件属性

onabort, onbeforeunload, onblur, onchange, onclick, oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onfocus, onkeydown, onkeypress, onkeyup, onload, onmessage, onmousedown, onmousemove, onmouseover, onmouseout, onmouseup,

onmousewheel, onresize, onscroll, onselect, onsubmit, onunload

如需完整的描述，请访问 HTML 5 中事件属性。

 

TIY 实例

表格 

<html> 
<body> 
<p>每个表格由 table 标签开始。</p> 
<p>每个表格行由 tr 标签开始。</p> 
<p>每个表格数据由 td 标签开始。</p> 
<h4>一列：</h4> 
<table border="1"> 
<tr> 
<td>100</td> 
</tr> 
</table> 
<h4>一行三列：</h4> 
<table border="1"> 
<tr> 
<td>100</td> 
<td>200</td> 
<td>300</td> 
</tr> 
</table> 
<h4>两行三列：</h4> 
<table border="1"> 
<tr>  
<td>100</td> 
<td>200</td> 
<td>300</td> 
</tr> 
<tr> 
<td>400</td> 
<td>500</td> 
<td>600</td> 
</tr> 
</table> 
</body> 
</html>


这个例子演示如何在 HTML 文档中创建表格。

 

表格中的标题(Headings) 

<html> 
<body> 
<h4>表头：</h4> 
<table border="1"> 
<tr> 
<th>姓名</th> 
<th>电话</th>  
<th>电话</th> 
</tr> 
<tr> 
<td>Bill Gates</td> 
<td>555 77 854</td> 
<td>555 77 855</td> 
</tr> 
</table> 
<h4>垂直的表头：</h4> 
<table border="1"> 
<tr> 
<th>姓名</th> 
<td>Bill Gates</td> 
</tr> 
<tr> 
<th>电话</th> 
<td>555 77 854</td> 
</tr> 
<tr> 
<th>电话</th> 
<td>555 77 855</td> 
</tr> 
</table> 
</body> 
</html>


本例演示如何显示表格标题。

 

空单元格 

<html> 
<body> 
<table border="1"> 
<tr> 
<td>Some text</td> 
<td>Some text</td> 
</tr> 
<tr> 
<td></td> 
<td>Some text</td> 
</tr> 
</table> 
<p>正如您看到的，其中一个单元没有边框。这是因为它是空的。在该单元中插入一个空格后，仍然没有边框。 
</p> 
<p>我们的技巧是在单元中插入一个 no-breaking 空格。</p>
<p>no-breaking 空格是一个字符实体。如果您不清楚什么是字符实体，请阅读关于字符实体的章节。</p> 
<p>no-breaking 空格由和号开始 ("&")，然后是字符"nbsp"，并以分号结尾(";")。</p> 
</body> 
</html>


本例展示如何使用 " " 处理没有内容的单元格。

 

带有标题的表格 

<html> 
<body> 
<h4>这个表格有一个标题，以及粗边框：</h4> 
<table border="6"> 
<caption>我的标题</caption> 
<tr> 
<td>100</td> 
<td>200</td> 
<td>300</td> 
</tr> 
<tr> 
<td>400</td> 
<td>500</td> 
<td>600</td> 
</tr> 
</table> 
</body>


本例演示一个带标题 (caption) 的表格

 

跨行或跨列的表格单元格 

<html> 
<body> 
<h4>横跨两列的单元格：</h4> 
<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> 
<h4>横跨两行的单元格：</h4> 
<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> 
</body> 
</html>


本例演示如何定义跨行或跨列的表格单元格。

 

表格内的标签

本例演示如何在不同的元素内显示元素。 

<html> 
<body> 
<table border="1"> 
<tr> 
<td> 
<p>这是一个段落。</p> 
<p>这是另一个段落。</p> 
</td> 
<td>这个单元包含一个表格： 
<table border="1"> 
<tr> 
<td>A</td> 
<td>B</td> 
</tr> 
<tr> 
<td>C</td> 
<td>D</td> 
</tr> 
</table> 
</td> 
</tr> 
<tr> 
<td>这个单元包含一个列表： 
<ul> 
<li>苹果</li> 
<li>香蕉</li> 
<li>菠萝</li> 
</ul> 
</td> 
<td>HELLO</td> 
</tr> 
</table> 
</body> 
</html>


 



© 2025 Copyright: kuaikuaixuan.com 京ICP备14015652号-3 网址导航