0319-table表格标签及属性

最新推荐文章于 2024-02-22 11:26:12 发布

原创最新推荐文章于 2024-02-22 11:26:12 发布 · 411 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#table表格标签及属性

本文详细介绍了HTML中的表格标签及其常用属性，包括如何设置边框、背景颜色、单元格间距等，同时还展示了如何通过属性控制表格及其单元格的内容对齐方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签</title>
</head>
<body>
<!--table  表格
    常用属性：
    1，border：给表格添加边框，
    当border属性增大时，只有外围框线增加，单元格的边框始终为1px
    2，bordercolor="blue"边框颜色
    3，width  height：表格的宽高
    4，cellspacing：单元格与单元格之间的间隔距离
    当cellspacing="0"时，只会使单元格间隔为0，但不会合并边框线。
    表格边框合并：style="border-collapse: collapse"，
    无需再写cellspacing="0"
    5，cellpadding="0"每个单元格中的内容与边框线的距离。
    6，align=：表格在屏幕的左中右位置显示，left center right
    注意：给表格加上align相当于让表格浮动。
    7，bgcolor：背景色  等同于style="background: yellow";
    8:background ：
    style="background-image: url('../../img/1.jpg')"设置背景图片,
    背景图会覆盖背景色
    -->
<table border="1" bordercolor="blue"width="500px"height="200px"
       style="border-collapse: collapse;background: yellow;
       background-image: url('../../img/1.jpg')"
       cellpadding="10px"align="center">
    <!--【tr和td相关的属性】
        1:width/height:单元格的宽高
        2：bgcolor：单元格的背景颜色
        3：align=：left center right 单元格中文字，水平对齐方式
        4:valign:top center right 单元格中的文字，垂直对齐方式
        5：nowrap="nowrap"单元格中文字不换行
        注意:1.当表格属性与行列属性冲突，以行列属性为准（就近原则）
        2.表格的align属性，是控制表格自身在浏览器的显示位置,
        行和列的align属性是控制单元格中文字在单元格中的对齐方式
        3.表格的align属性，并不影响表格内文字水平对齐方式,
        
-->
    <tr bgcolor="red"align="center">
        <td width="300"height="200"align="center"nowrap="nowrap">手机充值</td>
        <td>ip卡</td>
        <td>网游</td>
    </tr>
    <tr>
        <td>移动</td>
        <td>联通</td>
        <td>电信</td>
    </tr>

</table>

</body>
</html>