html入门（表格元素）

最新推荐文章于 2023-02-10 10:50:22 发布

Ricartc

最新推荐文章于 2023-02-10 10:50:22 发布

阅读量315

点赞数

分类专栏：程序开发文章标签： html5 电脑编程

本文链接：https://blog.csdn.net/Ricardo18/article/details/65451833

版权

程序开发专栏收录该内容

51 篇文章 0 订阅

订阅专栏

<!--table标签的使用
        表格的表头：<th></th> 默认加粗，单元格居中
         <常用属性>
         1 border:给表格添加边框。
         当border属性增大时，只有外围框线增加，单元的边框始终为1px
         2 bordercolor=“”  边框颜色
         3 width，height：边框的宽高
         4 cellspacing：单元格与单元格之间的间隙距离。
         当你的cellspacing=“0”，只会使单元格的间隙为0.但不会合并边框线。
         表格边框合并：style="border-collapse:collapse;"，无需再写cellapsing=“0”
         （注：在h5中并不支持此属性，但是仍可使用）
         5 cellpadding：每个单元格中的内容与边框线的距离。
         6 align：表格在屏幕的左中右位置显示，left center right
         注意：给表格加上align颜色，相当于让表格浮动 。会直接打破表格后面元素的原有排列方式
         7 background：background=“image/computer.jpg"设置背景图片等同于
         style=”background-image：“；且背景图会覆盖背景色
         8 backgroundcolor：背景色  等同于style=“bakcground-color；”-->








<!--tr和td相关的属性
       1 width和height：单元格的宽高
       2 bgcolo：单元格的背景颜色
       3 align：left center right 单元格的文字，水平对齐方式
       4 valign：top center bottom 单元格中的文字，垂直对齐方式
       5 nowrap=“nowrap”单元格中文字不换行

       注意：
         1：当表格属性与行属性冲突时，以行属性为准（近者优先，就近原则）
         2：表格的align属性，是控制表格自身在浏览器的显示位置；
         行和列的align属性，是控制单元格中文字在单元格中的对齐方式
         3：表格的align属性，并不影响表格内，文字的水平对齐方式
            tr的align或者valign属性，可以控制一行中所有单元格的水平或者垂直对齐方式-->

代码实现部分：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<table border="2">
    <tr>
        <td>手机充值</td>
        <td>IP卡</td>
        <td>网游</td>
    </tr>
    <td>移动</td>
    <td>联通</td>
    <td>电信</td>
</table>

<br/>
<table>
    <tr>
        <th>姓名</th>
        <th>学号</th>
        <th>数学成绩</th>
        <th>语文成绩</th>
        <th>英语成绩</th>

    </tr>
    <tr>
        <td>1001</td>
        <td>张三</td>
        <td>100</td>
        <td>120</td>
        <td>120</td>
    </tr>
   <tr>
        <td>1001</td>
        <td>张三</td>
        <td>100</td>
        <td>120</td>
        <td>120</td>
    </tr>   <tr>
        <td>1001</td>
        <td>张三</td>
        <td>100</td>
        <td>120</td>
        <td>120</td>
    </tr>
</table>
<!--跨行跨列的表格制作-->
<!--rowspan 跨行
    colspan 跨列-->
<table border="1">
    <tr>
        <td>第一行第一列</td>
        <td colspan="3">第一行第二列</td>
    </tr>
    <tr>
        <td rowspan="3">第二行跨三列</td>
        <td>第二行第二列</td>
        <td>第二行第三列</td>
        <td>第二行第四列</td>

    </tr>
    <tr>
        <td>第三行第二列</td>
        <td>第三行第三列</td>
        <td>第三行第四列</td>
    </tr>
    <tr>
        <td>第四行第二列</td>
        <td>第四行第三列</td>
        <td>第四行第四列</td>
    </tr>

</table>
<br/>
<hr/>
<table border="1">
    <tr>
        <td colspan="4">电子产品</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td colspan="2">1</td>
        <td colspan="2">2</td>

    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td colspan="3">1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <hr/>
    <hr/>
    <table border="1">
        <tr>
            <td rowspan="2">1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td rowspan="2">1</td>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
    </table>
</table>
<br/>








<table border="1" width="400px"height="200px"align="center">
    <tr>
        <td rowspan="6"></td>
        <td rowspan="3"></td>
        <td rowspan="2"></td>
        <td></td>

    </tr>
    <tr>
        <td></td>
    </tr>
    <tr>
        <td rowspan="2"></td>
        <td></td>
    </tr>
    <tr>
        <td rowspan="3"></td>
        <td></td>
    </tr>
    <tr>
        <td rowspan="2"></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
    </tr>

</table>

<br/>
<br/>
<table border="1"width="400px"height="200px">
    <caption>我是标题头！</caption>
    <tr>
        <td colspan="2"></td>
    </tr>
    <tr>
        <td rowspan="4"></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
    </tr>
    <tr>
        <td></td>
    </tr>
    <tr>
        <td></td>
    </tr>
</table>
</body>
</html>

Ricartc

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html入门（表格元素）

标签的使用表格的表头：默认加粗，单元格居中常用属性> 1 border:给表格添加边框。当border属性增大时，只有外围框线增加，单元的边框始终为1px 2 bordercolor=“” 边框颜色 3 width，height：边框的宽高 4 cellspacin
复制链接

扫一扫