美文网首页
table表格的属性

table表格的属性

作者: 小小西瓜呀 | 来源:发表于2019-02-24 21:51 被阅读0次

border:设置边框。例:

<table border="5">

</table>


cellspacing:设置单元格与单元格之间的空白间距

cellpadding:设置单元格内容与单元格边框之间的空白间距

width:表格的宽

hight:表格的高

align:设置表格在网页中的对齐方式(center/left/right)

<tr></tr>:行标签

<th></th>:表头标签

<td></td>:单元格标签


<table border="1" width="500" cellspacing="0" align="center" style="text-align: center;">

(边框为1像素,宽500px,单元格间距为0,整个表格在网页居中显示,整个表格内容居中)

<caption align="center">2018收入统计</caption>(表格标题标签)

<tr>                      --------行标签

<th>姓名</th>              ----表头

<th>年龄</th>              ----表头

<th>年收入</th>           ----表头

</tr>

<tr>

<td>刘德华</td>            ----单元格标签

<td>61</td>

<td>5亿</td>

</tr>

<tr>

<td>周星驰</td>

<td>58</td>

<td>5亿</td>

</tr>

</table>


晚安^_^


表格合并单元格,分为跨行合并和跨列合并。

rowspan:跨行合并

colspan:跨列合并

示例:

<table width="600" border="5" style="text-align:center;">

    <caption>火影忍者角色表</caption>

    <thead>

        <tr>

            <th>姓名</th>

            <th>性别</th>

            <th>年龄</th>

        </tr>

        <tr>

            <td>大蛇丸</td>

            <td>男</td>

            <td rowspan="3">18</td>

        </tr>

        <tr>

            <td>鸣人</td>

            <td>男</td>

        </tr>

        </tr>

            <td>佐助</td>

            <td>男</td>

        </tr>

        <tr>

            <td colspan="3">佐助</td>

        </tr>

    </thead>

</table>


效果预览

相关文章

  • table

    table表格属性 有table-layout属性 列分组属性 colgroup col

  • table表格的使用

    01表格-table常见元素 table tr td 02表格-tr和td相关属性设置 03表格-边框合并属性 b...

  • HTML系列(HTML表格)

    表格基本格式

    表格的属性: (例: )
    标签的属性 (例: ) 表格的拆...

  • Tailwind Table

    表格样式工具类 表格布局table layout CSS中table-layout属性用于设置表格布局的类型,即用...

  • HTML入门3(0717)

    07-17 1.表格