HTML学习笔记5: table表格标签

table表格标签

---

table

• border            表格边框的宽度

• width 规定表格的宽度

• cellspacing 规定单元格之间的空隙

tr: 行

td: 单元格

th: 如果是表头单元格, 可以替换为th, 默认带有加粗和居中展示的效果

---

<table border="5px" width="600px">
        <tr>
            <th>序号</th>
            <th>品牌logo</th>
            <th>品牌名称</th>
            <th>企业名称</th>
        </tr>
        <tr>
            <td>1</td>
            <td><img src="img/huawei.png" width="100px"></td>
            <td>华为</td>
            <td>华为技术有限公司</td>
        </tr>
        <tr>
            <td>2</td>
            <td><img src="img/阿里.svg" width="100px"></td>
            <td>阿里</td>
            <td>阿里巴巴集团控股有限公司</td>
        </tr>

通过设置table标签的cellspacing属性为0, 将单元格之间的间隙设置为0

<p>通过cellspacing=0设置单元格空白为0</p>
    <table border="5px" cellspacing="0" width="600px">
        <tr>
            <th>序号</th>
            <th>品牌logo</th>
            <th>品牌名称</th>
            <th>企业名称</th>
        </tr>
        <tr>
            <td>1</td>
            <td><img src="img/huawei.png" width="100px"></td>
            <td>华为</td>
            <td>华为技术有限公司</td>
        </tr>
        <tr>
            <td>2</td>
            <td><img src="img/阿里.svg" width="100px"></td>
            <td>阿里</td>
            <td>阿里巴巴集团控股有限公司</td>
        </tr>

---

设置单元格内容居中展示

<style>
    /* 单元格内容居中是写在tr中的 */
    tr{
        text-align: center;
    }
</style>