table表格的属性

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>


效果预览

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 30.新媒体内容变现的价格策略 30.1 头图策略(价格优势)、30.2内页策略(价格高,优质取胜)、 30.3阅...
    我是我自己的盖世英雄gogo阅读 168评论 0 0
  • 今天是31,2017年的最后一天,前几天高中同学发了一个结婚请帖过来,今天是大喜日子,但是我人在广东就打算不...
    55a50d532804阅读 174评论 0 1
  • 在天堂和地狱之间 游荡在人间 这里茫茫人海 这里荒凉一片 在万丈红尘中 寻我唯一之灵魂伴侣 得之 我幸 不得 我命
    云裳Angel阅读 153评论 0 3
  • 在这里首先必须自我检讨一下,说真的,我都没记得今天是母亲节,看到其它公众号推送的文章才知道今天是母亲节,所以必须跟...
    鱼小坤阅读 225评论 0 0

友情链接更多精彩内容