6.表格

来源：互联网发布：图片动态特效制作软件编辑：程序博客网时间：2024/06/06 01:47

1.表格：

用来展示数据。

<body>    <table>      表格        <tr>     行            <td></td>    列            <td></td>    列            <td></td>    列        </tr>        <tr>      行            <td></td>   列            <td></td>   列            <td></td>   列        </tr>    </table></body>

2.属性：

border=”1” 边框
width=”500” 表格宽度
height=“300”表格高度
cellspacing=”2” 单元格与单元格的距离，默认为2，若无需距离，则为0.
cellpadding=”2” 内容与边框的距离
align="left | right | center" 内容对齐方式
如果直接给表格table用align=”center” 表格在页面居中
如果给tr或者td使用，则tr或者td内容居中。
bgcolor=”yellow” 背景颜色。

<body>    <table border="4" width="500" height="300" cellspacing="12" cellpadding=10" align="center" bgcolor="yellow">        <tr align="center"></tr>                <td>张三</td>               <td>18</td>            <td>IT</td>           </tr>        <tr>                 <td>李四</td>              <td>22</td>               <td>设计</td>          </tr>    </table></body>

3.表格的标准结构

※：有利于seo搜索引擎的优化

<body>    <table border="1" width="500" height="300">        <thead>            <tr height="300"> 改头部的高度要在tr中改，thead只是一个标记                   <td></td>                <td></td>            </tr>        </thead>        <tbody>            <tr>                <td></td>                <td></td>            </tr>        </tbody>        <tfoot>            <tr>                <td></td>                <td></td>            </tr>        </tfoot>    </table></body>

4.表头和表格的合并

添加表头：<caption>表头</caption>
colspan=“2”：合并同一行单元格
rowspan=“2”:合并同一列单元格

<table border="1" width=“500" height="300" align="left"><caption>成绩表</caption>    <tr>        <td colspan="2">张三 优</td>        *<td>22</td>*   注释掉        <td rowspan="3">优</td>    </tr>    <tr>        <td>张三</td>        <td>22</td>        *<td>优</td>*    </tr>    <tr>        <td>张三</td>        <td>22</td>        *<td>优</td>*    </tr></table>

5.表格标题、边框颜色、内容垂直对齐

表格标题

：<th></th>用法与<td></td>相同

<tr>    <th>姓名</th>    <th>年龄</th>    <th>职业</th></tr>

边框颜色:

bordercolor="red"

内容垂直对齐方式：

valign="top | middle | bottom"

<tdvalign="bottom">张三</td>

6.细线表格

表格默认border为1，实际像素为2，所以显示结果为略粗的线。
1.先给整个表格table给一个背景色bgcolor="green"
2.再给每个单元格tr一个背景色bgcolor="white"
3.给单元格之间的边距cellspacing="1"

<table width=“500" height="300" bgcolor="green" cellspacing="1" align="center">    <tr bgcolor="white">        <td></td>        <td></td>    </tr>    <tr bgcolor="white">        <td></td>        <td></td>    </tr>    <tr bgcolor="white">        <td></td>        <td></td>    </tr></table>

阅读全文

0 0