HTML表格实例1.这个例⼦演⽰如何在 HTML ⽂档中创建表格。
<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>
2.表格边框
本例演⽰各种类型的表格边框。  ###border="1" 加粗和加深边框，值越⼤越好
<h4>带有普通的边框：</h4>
<table border="1">
<tr>
<td>First</td>
<td>ROW</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>带有粗的边框：</h4>
<table border="8">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
3.没有边框的表格
本例演⽰⼀个没有边框的表格。  border="1"  #等于1 是有边框的，等于0  就没有边框了
<h4>这个表格没有边框</h4>
<table>
html网页设计 table <tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
<h4>这个表格也没有边框</h4>
<table border="0">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
4.表格中的表头(Heading)
本例演⽰如何显⽰表格表头。
<h1>表格中的表头</h1>
<table border="1">
<tr>
<th>姓名</th>
<th>电话</th>
<th>性别</th>
</tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td> 男</td>
</table>
<h4>垂直表头</h4>
<table border="1">
<tr>
<th>姓名</th>
<td>邹⽴翔</td>
</tr>
<tr>
<th>电话</th>
<td>1234545</td>
</tr>
<tr>
<th>性别</th>
<td>男</td>
</tr>
</table>
<h4>这个表格也没有边框</h4>
<table border="0">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
32.带有标题的表格
本例演⽰⼀个带标题 (caption) 的表格
<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>
33.跨⾏或跨列的表格单元格
本例演⽰如何定义跨⾏或跨列的表格单元格。  ##colspan ="2" 跨两列<h4>横向两列的单元格</h4>
<table border="1">
<tr>
<th>姓名</th>
<th colspan="2">电话</th>
</tr>
<tr>
<td>邹⽴翔</td>
<td>123213</td>
<td>223434</td>
</tr>
>>>###
<h4>横跨两⾏的单元格</h4>
<table border="1">
<tr>
<th>姓名</th>
<td>邹⽴翔</td>
</tr>
<tr>
<th rowspan="2">电话</th>
<td>2132432</td>
</tr>
<td>2434343</td>
</tr>
</table>
34.表格内的标签
本例演⽰如何显⽰在不同的元素内显⽰元素。
<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>
35.单元格边距(Cell padding)
本例演⽰如何使⽤ Cell padding 来创建单元格内容与其边框之间的空⽩。<h4>没有 cellpadding</h4>
<table border="1">
<tr>
<td>First</td>
<td>ROW</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>带有 cellpadding</h4>
<table border="1" cellpadding="10">
<tr>
<td>First</td>
<td>ROW</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
36.单元格间距(Cell spacing)
本例演⽰如何使⽤ Cell spacing 增加单元格之间的距离。
<h4>没有 cellspacing</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>ROW</td>
</tr>
</table>
<h4>带有 cellspacing</h4>
<table border="1" cellspacing="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>ROW</td>
</tr>
37.向表格添加背景颜⾊或背景图像
本例演⽰如何向表格添加背景。
<h4>背景颜⾊</h4>
<table border="1"
bgcolor="red">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>背景图像</h4>
<table border="1"
background="1.png">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
38.向表格单元添加背景颜⾊或者背景图像
本例演⽰如何向⼀个或者更多表格单元添加背景。
<h4>单元背景</h4>
<table border="1">
<tr>
<td bgcolor="red">First</td>
<td>Row</td>
</tr>
<tr>
<td background="1.png">
Sedcond</td>
<td>Row</td>
</tr>
</table>
39.在表格单元中排列内容
本例演⽰如何使⽤ "align" 属性排列单元格内容，以便创建⼀个美观的表格。<table width="400" border="1">
<tr>
<th align="left">消费项⽬</th>
<th align="right">⼀⽉</th>
<th align="right">⼆⽉</th>
</tr>
<tr>
<td align="left">⾐服</td>
<td align="right">$241</td>
<td align="right">$200</td>
</tr>
<tr>
<td align="left">化妆品</td>
<td align="right">$30</td>
<td align="right">$40</td>
</tr>
<tr>
<td align="f=left">⾷物</td>
<td align="right">$730</td>
<td align="right">$650</td>
</tr>
<tr>
<th align="left">总计</th>
<th align="right">$1200</th>
<th align="right">$744</th>
</tr>
</table>
40.框架(frame)属性
本例演⽰如何使⽤ "frame" 属性来控制围绕表格的边框。
<p><b>注释：</b>frame 属性⽆法在 Internet Explorer 中正确地显⽰。</p> <p>Table with frame="box":</p>
<table frame="box">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<p>Table with frame="above":</p>
<table frame="above">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<p>Table with frame="below":</p> <table frame="below">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<p>Table with frame="hsides":</p> <table frame="hsides">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<p>Table with frame="vsides":</p> <table frame="vsides">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。

关于表格(table)的实例
« 上一篇
HTML页面自适应宽度的table(表格)
下一篇 »

发表评论