首頁  >  文章  >  web前端  >  HTML製作表格的方法

HTML製作表格的方法

墨辰丷
墨辰丷原創
2018-06-04 15:33:1512485瀏覽

在html中繪製表格使用table標籤,tr表示行,td表示列,下面透過程式碼實例給大家介紹HTML表格的相關知識,有興趣的朋友一起看看吧

在html中繪製表格使用table標籤

  • tr表示行

  • # th表示表頭,表頭通常用於列出名字。

  • 下面是一個列子。

    <html>
        <head>
            <title>Table in html</title>
        </head>
        <body>
            <p>水平表头</p>
            <table border="1">
             <tr>
                <th>Name</th>
                <th>Age</th>
                <th>Gender</th>
             </tr>
             <tr>
                <td>zdd</td>
                <td>30</td>
                <td>male</td>
             </tr>
             </table>
             <p>垂直表头</p>
             <table border="1">
             <tr>
                <th>Name</th>
                <td>autumn</td>
             </tr>
             <tr>
                <th>Age</th>
                <td>30</td>
             </tr>
             <tr>
                <th>Gender</th>
                <td>famale</td>
             </tr>
            </table>
        </body>
    </html>
  • 效果圖

水平表頭

NameAgeGenderzdd

#30

male

#

垂直表頭

##Age#Gender

Name

autumn

#Age

30

########## ##famale###################

无边框表格

如果在定义表格时,没有指定border属性,那么表格就没有边框

<table>
    <tr><td>zdd</td><td>30</td></tr>
    <tr><td>ddz</td><td>27</td></tr>
</table>

效果图

zdd

30

ddz

27

空单元格

如果没有为单元格指定内容,那么单元格将是空的,且没有边框,如下,这样很不美观。

zdd

30

27

如果解决呢?方法是给空的单元格加上空格,由于html忽略多余的空格,所以我们不能直接加空格,而要加 nbsp表示空格。

<table border="1">
    <tr><td>zdd</td><td>30</td></tr>
    <tr><td> </td>20</tr>
</table>

效果图

zdd

30

20

带标题的表格

使用caption属性,但是好像标题中不能有空格,否则显示的时候会换行!

<table border="1">
<caption>我的表格</caption>
    <tr><td>zdd</td><td>30</td></tr>
    <tr><td> </td><td>20</td></tr>
</table>

我的表格

zdd

30

20

跨行或者跨列的表格

用colspan跨行

<table border="1">
<tr><th>姓名</th><th colspan="2">电话</th></tr>
<tr><td>Bill Gates</td><td>555 77 854</td><td>555 77 855</td></tr>
</table>

姓名

电话

Bill Gates

555 77 854

555 77 855

用rowspan跨列

<table border="1">
<tr><th>姓名</th><td>Bill Gates</td></tr>
<tr><th rowspan="2">电话</th><td>555 77 854</td></tr>
<tr><td>555 77 855</td></tr>
</table>

嵌套的表格

table标签是可以嵌套的,也就是说在tr或者td标签中加入table标签即可创建表格中的表格。

总结:以上就是本篇文的全部内容,希望能对大家的学习有所帮助。

相关推荐:

前端html表格生成excel表格实例

html表格知识总结

重新发现HTML表格

以上是HTML製作表格的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn