6.表格

最新推荐文章于 2024-07-25 15:42:10 发布

121689Stone

最新推荐文章于 2024-07-25 15:42:10 发布

阅读量316

点赞数

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/qq_37993288/article/details/77336418

版权

html 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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>