表格的创建

从-1开始的程序员

已于 2022-07-05 18:23:58 修改

阅读量1.3k

点赞数 3

分类专栏：学习笔记文章标签： html5 vscode 前端学习 css

于 2022-07-04 23:08:04 首次发布

本文链接：https://blog.csdn.net/weixin_50784185/article/details/125609660

版权

学习笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

table表格的创建

由行、列、单元格组成

特点：通常情况下，同行的高度一致，同列的宽度一致。

创建表格快捷键：table>tr*3>td*2（创建3行2列的表格）

表格的属性

宽度 width
高度 height
边框 border
边框颜色 bordercolor
背景颜色 bgcolor
水平对齐 align=“left或right或center”
cellspacing="单元格与单元格之间的间距“
cellpadding="单元格与内容之间的空隙"

行（tr）属性

高度 height
背景颜色 bgcolor
文字水平对齐 align=“left或right或center”
文字垂直对齐 valign=“top或middle或bottom"

单元格（td）属性

宽度 width
高度 height
背景颜色 bgcolor
文字水平对齐 align=“left或right或center”
文字垂直对齐 valign=“top或middle或bottom"

<table width="500" height="300" border="2" bordercolor="black" align="center" cellspacing="0" cellpadding="10">   <!--创建表格-->
        <tr height="6" align="center" valign="middle">  <!--tr 表示行-->
            <td>科目</td>   <!--td 表示单元格-->
            <td>成绩</td>
        </tr>
        <tr height="6" align="center" valign="middle">
            <td>语文</td>
            <td>110</td>
        </tr>
        <tr height="6" align="center" valign="middle">
            <td>数学</td>
            <td>130</td>
        </tr>
        <tr height="6" align="center" valign="middle">
            <td>英语</td>
            <td>140</td>
        </tr>
        <tr height="6" align="center" valign="middle">
            <td>综合</td>
            <td>220</td>
        </tr>
        <tr height="6" align="center" valign="middle">
            <td>总分</td>
            <td>600</td>
        </tr>

表格和并列

Colspan=“所要合并的单元格的列数” 必须给td

<table width="500" height="300" border="2" bordercolor="black" align="center" cellspacing="0" cellpadding="10">   
         <tr height="6" align="center" valign="middle">
            <td colspan="2">1</td>
            <td>2</td>
        </tr>
        <tr height="6" align="center" valign="middle">
            <td>3</td>
            <td>4</td>
        </tr>
        <tr height="6" align="center" valign="middle">
            <td>5</td>
            <td>6</td>
        </tr>
    </table>

表格合并行

Rowspan=“所要合并的单元格的行数” 必须给td

 <table width="500" height="300" border="2" bordercolor="black" align="center" cellspacing="0" cellpadding="10">   
         <tr height="6" align="center" valign="middle">
            <td rowspan="3">1</td>
            <td>2</td> 
        </tr>
        <tr height="6" align="center" valign="middle">
            <td>3</td>
            <!-- <td>4</td> -->
        </tr>
        <tr height="6" align="center" valign="middle">
            <td>5</td>
            <!-- <td>6</td> -->
        </tr>
    </table>