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
<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>
##Name | Age | ##Gender | ||||||||||||||||||||||||||||
##30 | male | Vertical header
空单元格 如果没有为单元格指定内容,那么单元格将是空的,且没有边框,如下,这样很不美观。
如果解决呢?方法是给空的单元格加上空格,由于html忽略多余的空格,所以我们不能直接加空格,而要加 nbsp表示空格。 <table border="1"> <tr><td>zdd</td><td>30</td></tr> <tr><td> </td>20</tr> </table> Copy after login 效果图
带标题的表格 使用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 我的表格
跨行或者跨列的表格 用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
用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标签即可创建表格中的表格。 总结:以上就是本篇文的全部内容,希望能对大家的学习有所帮助。 相关推荐: 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! 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
Latest Articles by Author
Latest Issues
PX automatic conversion to REM error
<style>html { font-size: calc(100vw / 3.75); }...
From 2024-04-16 09:34:16
0
0
4687
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Latest Downloads
More>
|