HTML学习笔记(三)
插入表格<table border="数值">--border为边框的粗细
每一行<tr>
每一行的每一格数据<td>
eg:
<html>
<body>
<table border="1"
cell padding="10"--/这里的cellpadding为数据距边框的距离
cell spacing="10"--/这里的是单元格之间的距离
background="/i/eg_bg_07.gif"---/为表格设置背景图像。。如果是设置颜色为bgcolor=“red”
frame="above">---/用frame框架来"box""above""below""hsides""vsides"
<caption>标题</caption>---//表格外的标题
<tr>
<th align="left">heading 1</th>---//表格的标题使用th,会给字体加粗,使用align可以排列数据的位置
</tr>
<tr>
<td> </td>---//要用一个 ;来占空格位置 否则不会在空数据处显示表格
<td bgcolor="red">100</td>--/在表格单元添加背景颜色或图像
</tr>
</table>
</body>
</html>
一个标头两列内容的表格
<tr>
<th colspan="2">ruby</th>
</tr>
<tr>
<td>100</td>
<td>200</td>
</tr>
如果标头对应两行数据 则是
<tr>
<th rowspan="2">title</th>
<td>100</td>
</tr>
<tr>
<td>200</td>
</tr>
可以在表格里再嵌套表格或者其他格式
<tr>
<td>这个单元包含一个列表:
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>菠萝</li>
</ul>
</td>
<td>HELLO</td>
</tr>
一个更为完整的格式结构 copy自w3c
<html>
<head>
<style type="text/css">
thead {color:green}
tbody {color:blue;height:50px}
tfoot {color:red}
</style>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>
</body>
</html>
补 <table width="100%" border="1">
<col align="left" />
<col align="left" />
<col align="right" />。。。。这里的COL是直接定义整列的数据位置
<colgroup span="2" align="left"></colgroup>
<colgroup align="right" style="color:#0000FF;"></colgroup>
把两列作为一组 为colgroup