html5表格怎么写 用html5做一个表格

html 5 表格用法总结

1. 表格标签

表格	描述
table	定义表格
caption	定义标题
th	定义表头
td	定义单元格

2. 应用实例

1. 表格边框— "<table border=“1”

<!--1. 没有边框的表格-->
<h3>1.无框表格</h3>
<table>
    <!--tr 表格的行-->
    <tr>
        <td>100</td>
        <td>200</td>
        <td>300</td>
    </tr>
</table>
<h3>2.有框表格</h3>
<table border="1">
    <tr>
        <td>400</td>
        <td>500</td>
        <td>600</td>
    </tr>
</table>

2. 表格表头 <th 标签

<h3>3.表格中的表头</h3>
<!--tr表格中每行，th 表格中表头分为横向表头和纵向表头, td 单元格中的内容-->
<table border="1">
    <!--横向表头，表头和数据分开，单独添加在tr中-->
    <tr>
        <th>姓名</th>
        <th>电话</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>灵儿</td>
        <td>000</td>
        <td>007</td>
    </tr>
    <!--纵行表头，和对应的数据放在同一行即tr中-->
    <tr>
        <th>电影</th>
        <td>告白</td>
        <td>画皮</td>
    </tr>
    <tr>
        <th>国家</th>
        <td>韩国</td>
        <td>中国</td>
    </tr>
    <tr>
        <th>类型</th>
        <td>犯罪</td>
        <td>志怪</td>
    </tr>
</table>

3. 空单元格 &nbsp

设置边框时若单元格为空则不显示空单元格的边框，可以使用 &nbsp 起到占位符的作用

<h3>4.空单元格</h3>
<table border="1">
    <tr>
        <td>one</td>
        <td>two</td>
    </tr>
    <tr>
        <td> </td>
        <td>for</td>
    </tr>
</table>

4. 表格标题 <caption 标签

<h3>5.表格标题</h3>
<table border="2" style="background: coral">
    <caption>表1-5...</caption>
    <tr>
        <td>100</td>
        <td>200</td>
        <td>300</td>
        <td>400</td>
    </tr>
    <tr>
        <td>100</td>
        <td>200</td>
        <td>300</td>
        <td>400</td>
    </tr>
</table>

5. 合并单元格

• colspan=“2” 横跨两列
• rowspan=“2” 横跨两行

<h3>6.跨行跨列的单元格</h3>
<table border="1">
    <caption>横跨两列</caption>
    <tr>
        <th>姓名</th>
        <th colspan="2" style="background: aquamarine">电话</th>
    </tr>
    <tr>
        <td>anni</td>
        <td>777</td>
        <td>888</td>
    </tr>
</table>
<table border="1">
    <caption>横跨两行</caption>
    <tr>
        <td>姓名</td>
        <td>anni</td>
        <td>anna</td>
    </tr>
    <tr>
        <th rowspan="2" style="background: coral">电话</th>
        <td>111</td>
        <td>222</td>
    </tr>
    <tr>
        <td>333</td>
        <td>444</td>
    </tr>
</table>

6. 表格嵌套

<h3>7.表格内的标签</h3>
<!--定义一个两行两列的表格，表格内部插入表格或列表或图片-->
<table border="1">
    <caption>一路向西，后会无期</caption>
    <!--r1-->
    <tr>
        <!--c1 -->
        <td ><p style="background: coral; font-family: 华文行楷;color:black">你最喜欢地方</p></td>
        <!--c2插入表格表格里面插入图片-->
        <td>
            <table border="1">
                <tr>
                    <td>
                        <a name="h1">
                            <img src="img/h1.jpg" border="1" width="80" height="60">
                        </a>
                    </td>
                    <td>
                        <a name="h2">
                            <img src="img/h2.jpg" border="1" width="80" height="60">
                        </a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <a name="h3">
                            <img src="img/h3.jpg" border="1" width="80" height="60">
                        </a>
                    </td>
                    <td>
                        <a name="h4">
                            <img src="img/h4.jpg" border="1" width="80" height="60">
                        </a>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <!--r2-->
    <tr>
        <!--c1-->
        <td>
            <u1>
                <a href="#h1"><li>h1</li></a>
                <a href="#h2"><li>h2</li></a>
                <a href="#h3"><li>h3</li></a>
                <a href="#h4"><li>h4</li></a>
            </u1>
        </td>

        <!--c2-->
        <td><p style="text-align: center">有时间就去看看吧</p></td>
    </tr>
</table>

7. 单元格边距 单元格内元素到边框的距离

• cellpadding=“10”

<h3>8.单元格边距</h3>
<table border="1" >
    <caption>没有边距</caption>
    <tr>
        <td>one</td>
        <td>two</td>
    </tr>
    <tr>
        <td>sir</td>
        <td>for</td>
    </tr>
</table>
<br/>
<table border="1" cellpadding="10">
    <!--cellpadding 创建单元格内容与其边框之间的空白-->
    <caption>有边距</caption>
    <tr>
        <td>one</td>
        <td>two</td>
    </tr>
    <tr>
        <td>sir</td>
        <td>for</td>
    </tr>
</table>

8. 单元格间距

• cellspacing=“10”

<h3>9.单元格间距</h3>
<!--cellspacing 单元格之间的距离-->
<table border="1" >
    <caption>没有间距</caption>
    <tr>
        <td>one</td>
        <td>two</td>
    </tr>
    <tr>
        <td>sir</td>
        <td>for</td>
    </tr>
</table>
<br/>
<table border="1" cellspacing="10">
    <!--cellpadding 创建单元格内容与其边框之间的空白-->
    <caption>有间距</caption>
    <tr>
        <td>one</td>
        <td>two</td>
    </tr>
    <tr>
        <td>sir</td>
        <td>for</td>
    </tr>
</table>
<br/>

9. 单元格对齐 align

<h3>10.单元格数据对齐方式</h3>
<table border="1" width="200"style="border: black;background: coral">
    <caption>通过 align 设置对齐方式</caption>
    <tr>
        <th align="left">消费项目</th>
        <th align="right">一月份</th>
        <th align="right">二月份</th>
    </tr>
    <tr>
        <th align="left">衣服</th>
        <td align="right">¥200</td>
        <td align="right">¥300</td>
    </tr>
    <tr>
        <th align="left">食物</th>
        <td align="right">¥320</td>
        <td align="right">¥400</td>
    </tr>
    <tr>
        <th align="left">总计</th>
        <td align="right">¥520</td>
        <td align="right">¥700</td>
    </tr>
</table>
<br/>

10. frame 属性

• frame 控制表格边框

<h3>11.frame控制表格边框</h3>
<table frame="box">
    <caption>frame="box"</caption>
    <tr>
        <th>Month</th>
        <th>Save</th>
    </tr>
    <tr>
        <td>January</td>
        <td>¥100</td>
    </tr>
</table>
<br/>
<table frame="above">
    <caption>frame="above"</caption>
    <tr>
        <th>Month</th>
        <th>Save</th>
    </tr>
    <tr>
        <td>January</td>
        <td>¥100</td>
    </tr>
</table>
<br/>
<table frame="below">
    <caption>frame="below"</caption>
    <tr>
        <th>Month</th>
        <th>Save</th>
    </tr>
    <tr>
        <td>January</td>
        <td>¥100</td>
    </tr>
</table>
<br/>
<table frame="hsides">
    <caption>frame="hsides"</caption>
    <tr>
        <th>Month</th>
        <th>Save</th>
    </tr>
    <tr>
        <td>January</td>
        <td>¥100</td>
    </tr>
</table>
<br/>
<table frame="vsides">
    <caption>frame="vsides"</caption>
    <tr>
        <th>Month</th>
        <th>Save</th>
    </tr>
    <tr>
        <td>January</td>
        <td>¥100</td>
    </tr>
</table>

3. 总结

2. 表格边框



4. 表格表头



5. 
   



7. 空单元格



9. 表格标题



11. 合并单元格



12. 
    



14. 表格嵌套



16. 单元格边距



18. 单元格间距



20. 单元格对齐



22. frame属性





23. 
    



24. 
    



25.