table表格的属性

2019-02-24  本文已影响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>


效果预览

上一篇下一篇

猜你喜欢

热点阅读