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>&nbsp;</td>---//要用一个&nbsp;来占空格位置 否则不会在空数据处显示表格

<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

 

posted @ 2013-11-22 11:44  solitary sloth  阅读(140)  评论(0编辑  收藏  举报