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

最新推荐文章于 2024-01-24 11:05:40 发布

.慢慢亦漫漫

最新推荐文章于 2024-01-24 11:05:40 发布

阅读量1.3w

点赞数 29

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

本文链接：https://blog.csdn.net/weixin_43183219/article/details/121981782

版权

了解table的基础知识，制作简单的table表格

摘要由CSDN通过智能技术生成

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