How to create a table in HTML

墨辰丷
Release: 2018-06-04 15:33:15
Original
12496 people have browsed it

Use the table tag to draw tables in html, tr represents rows, and td represents columns. The following is a code example to introduce you to the relevant knowledge of HTML tables. Friends who are interested can take a look.

In html Use the table tag

  • tr to represent rows

  • td to represent columns

  • ## th represents the table header, which is usually used for column names.

The following is an example.

<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>
Copy after login

Rendering

Horizontal header

zdd

##Name

Age

##Gender

##30

male

Vertical header

无边框表格

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

<table>
    <tr><td>zdd</td><td>30</td></tr>
    <tr><td>ddz</td><td>27</td></tr>
</table>
Copy after login

效果图

Name

autumn

Age

30

##Gender

famale

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>
Copy after login

效果图

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>
Copy after login

我的表格

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>
Copy after login

姓名

电话

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>
Copy after login

嵌套的表格

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

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

相关推荐:

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

html表格知识总结

重新发现HTML表格

The above is the detailed content of How to create a table in HTML. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template