table表格基础知识及简单运用

最新推荐文章于 2025-03-25 21:26:20 发布

.慢慢亦漫漫

最新推荐文章于 2025-03-25 21:26:20 发布

阅读量1.3w

点赞数 29

分类专栏： HTML 文章标签： css3 css html

本文链接：https://blog.youkuaiyun.com/weixin_43183219/article/details/121981782

版权

HTML 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了HTML中table表格的基础知识，包括表格的常用属性，如何创建表格，以及使用table制作个人简历的方法。通过设置表格的行、列、单元格属性，可以实现单元格的合并和对齐，为网页设计提供基础支持。

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

1.什么是table表格

在HTML中我们用< table >标签来定义表格，它和Excel表格类似，都包括行、列、单元格、表头等，但是在功能方面HTML的表格远不如Excel强大。

2.table的常用属性

margin：主要设置表格的外边框
padding：设置内边距
border：设置表格的边框
width：设置表格的宽度
height：设置表格的高度
bgcolor：设置背景颜色
background：背景图片
border-collapse：合并边框
tr：行
th/td：单元格

3.怎么制作一个table表格

（1）制作一个table表格，我们需要确定表格的行列数，比如，我们要制作一个三行四列的表格，那么就是三行，每行四个单元格，我们可以运用快捷写法（tr * 3>td * 4）直接回车键会自动生成一个三行四列的表格，如下代码：

<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

（2）tr的属性：

border：边框（粗细、颜色等直接在border后面加“-”加属性即可）
align：水平对齐
vlign：垂直对齐
bgcolor：背景色

（3）th/td的属性

width：单元格的宽度
height：单元格的高度
border：单元格的边框
align：水平对齐
vlign：垂直对齐
bgcolor：背景色
background：背景图片
colspan:跨列（水平合并）
rowspan：跨行（垂直合并）

4.用table制作一份简单的个人简历

 <style>
            /* 自己定义的类名，设置宽度和文本对齐方式 */
            .bigtable {
                width: 1100px;
                text-align: center;
            }

            /* 设置宽度和边框 */
            .smalltable {
                width: 100%;
                border: none;
            }



            table {
                /* 合并边框 */
                border-collapse: collapse;
                /* 边框颜色 */
                border-color: black;
                /* 边框宽度 */
                border-width: 1px;
                /* 设置边框样式是实线 */
                border-style: solid;
            }

            /* 设置行高 */
            tr {
                height: 75px;
            }

            /* 设置单元格的样式 */
            td {
                border-color: black;
                border-width: 1px;
                border-style: solid;
                width: 220px;

            }

            th {
                border-color: black;
                border-width: 1px;
                border-style: solid;
                width: 220px;
                background-color: rgb(210, 230, 243);

            }

            /* 设置简历图片的尺寸 */
            img {
                width: 220px;
                height: 290px;
            }

            /* 设置caption的字体大小和字体粗细 */
            caption {
                font-weight: 800px;
                font-size: 30px;
            }

            /* 设置这个类的文本对齐方式为左对齐 */
            .geshi {
                text-align: left;
            }

            .endu-td {
                /* 内边距为零 */
                padding: 0;
            }

            .td-01 {
                /* 无左边框 */
                border-left: none;
            }

            .td-02 {
                /* 无上边框 */
                border-top: none;
            }

            .td-03 {
                /* 无右边框 */
                border-right: none;
            }

            .td-04 {
                /* 无下边框 */
                border-bottom: none;
            }
        </style>
        <table class="bigtable">
            <caption>个人简历</caption>
            <tbody>
                <!-- tr*8>td*5  8行5列的表格 -->
                <tr>
                    <th>求职意向</th>
                    <td colspan="4">会计</td>

                </tr>
                <tr>
                    <th>姓名</th>
                    <td>小可爱</td>
                    <th>出生年月</th>
                    <td>2020.11.11</td>
                    <td rowspan="4"><img src="./imges/简历.PNG" alt=""></td>
                </tr>
                <tr>
                    <th>性别</th>
                    <td>女</td>
                    <th>政治面貌</th>
                    <td>共青团员</td>

                </tr>
                <tr>
                    <th>籍贯</th>
                    <td>北京</td>
                    <th>学历</tdh <td>本科</td>

                </tr>
                <tr>
                    <th>邮箱</th>
                    <td>11111111111</td>
                    <th>联系电话</th>
                    <td>66666</td>

                </tr>
                <!-- 地址 -->
                <tr>
                    <th>地址</th>
                    <td colspan="4">北京市海淀区</td>

                </tr>
                <tr>
                    <th>教育经历</th>
                    <td colspan="4" class="endu-td">
                        <table class="smalltable">
                            <tr>
                                <td class="td-01 td-02">起止日期</td>
                                <td class="td-02">学校</td>
                                <td class="td-02 td-03">专业</td>
                            </tr>
                            <tr>
                                <td class="td-01">2011.9-2016.6</td>
                                <td>北京财经专修学院</td>
                                <td class="td-03">会计</td>
                            </tr>
                            <tr>
                                <td class="td-01">2009.-2011.6</td>
                                <td>北京中学</td>
                                <td class="td-03"></td>
                            </tr>
                            <tr>
                                <td class="td-01 td04">2003.92009.6</td>
                                <td class="td-04">北京小学</td>
                                <td class="td-03 td-04"></td>
                            </tr>
                        </table>
                    </td>

                </tr>
                <!-- 主修课程 -->
                <tr>
                    <th>主修课程</th>

                    <td colspan="4" class="geshi">高数、概率论、线性代数、管理学、网页设计、java、c语言</td>

                </tr>

                <tr>
                    <th>实习经历</th>

                    <td colspan="4" class="geshi">2020.9-2021.11 goole公司 财务&nbsp; 负责申报、发票等，处理相关财务问题</td>
                </tr>
                <tr>
                    <th>荣誉证书</th>
                    <td colspan="4" class="geshi">国家一等奖学金&nbsp;
                        注册会计师
                    </td>
                </tr>
                <tr>
                    <th>校园经历</th>
                    <td colspan="4" class="geshi">2011.9 &nbsp;&nbsp;xxx校园大使</td>
                </tr>
                <tr>
                    <th>自我评价</th>
                    <td colspan="4" class="geshi">有责任心、抗压能力强</td>
                </tr>
            </tbody>
        </table>
    </center>
</body>

展示效果：
个人简历展示效果