tags, and the columns are the | tags. Rows must be defined before columns can be defined. Because in html, each column is in a row. The following table summarizes some commonly used tags: | 表格 | 描述 | | 定义表格 | | 定义表格标题 | | | 定义表格的表头 | | | 定义表格的行 | | | 定义表格的单元 | | 定义表格的页眉 | | | 定义表格的主体 | | 定义表格的页脚 | | 定义表格的列属性 | First define a simple table: You can see it after running <!DOCTYPE html><html> <head> <title></title> <meta charset="utf-8"> </head> <body> <table border="1"> <tr> <td>水果</td> <td>水果</td> <td>水果</td> </tr> <!-- 下面将td与tr反正写了，是不会构成表的 --> <td> <tr>asd</tr> <tr>asd</tr> <tr>asd</tr> <tr>asd</tr> </td> </table> </body></html> Copy after login As you can see, the | and | below the above comment are written anyway. A very small table will appear, but the text written in will not be displayed So in HTML, writing a table must be written line by line. The tag contains| Table without borders A table without borders is actually in the tag without adding Property border. The border attribute represents the border of the table. If no attribute is added, the default border="0" will be used. However, if there is no border, sometimes you will not be able to tell that it is a table. So sometimes a 1-pixel border is set for border="1px". Temporarily remove the border attribute and complete a table without borders <!DOCTYPE html><html> <head> <title></title> <meta charset="utf-8"> </head> <body> <table> <tr> <td>呵呵</td> <td>哈哈</td> <td>嘻嘻</td> </tr> <tr> <td>嘿嘿</td> <td>嘎嘎</td> <td>噗噗</td> </tr> <tr> <td>啊啊</td> <td>哦哦</td> <td>噢噢</td> </tr> </table> </body></html> Copy after login
in the table The header | I am the header |
|---|
You can also add a header to the table, using the tag, | The tag is also in the | tag. For the sake of better appearance, we still add the border: <!DOCTYPE html><html> <head> <title></title> <meta charset="utf-8"> </head> <body> <table border="1"> <tr> <th>人物</th> <th>介绍</th> <th>产品</th> </tr> <tr> <td>史蒂夫·保罗·乔布斯</td> <td>苹果CEO</td> <td>Apple系列</td> </tr> <tr> <td>丹尼斯·里奇</td> <td>C语言之父</td> <td>C语言</td> </tr> <tr> <td>比尔·盖茨</td> <td>微软CEO</td> <td>Windows系统</td> </tr> </table> </body></html> Copy after login You can also set the margins within the table The cellpadding attribute
can also set the cell margins cellspacing attribute <table border="1" cellpadding="10" cellspacing="10"> <tr> <td>xxx</td> </tr></table> Copy after login
Table with title <table border="1" cellpadding="10" cellspacing="10"> <caption>xxx表</caption> <tr> <td>xxx</td> </tr></table> Copy after login The color bgcolor attribute in the table <table border="1" bgcolor="red"> <tr> <td>xxx</td> </tr></table> Copy after login
The align attributes of cell content arrangement are center, left, right <table border="1" align="center"> <caption>xxx表</caption> <tr> <td>xxx</td> </tr></table> Copy after login Colspan attribute of cells across rows and columns, to be precise, merged cells <table border="1"> <caption>xxx表</caption> <tr> <td colspan="2">xxx</td> <td>xxx</td> </tr> <tr> <td>xxx</td> <td>xxx</td> <td>xxx</td> </tr></table> Copy after login HTML list A list is just like the titles in word, counting down. The subscripts are tags that control the title | 标签 | 描述 |
| 有序列表 | | 无序列表 | | 列表项 |
| 列表 | | 列表项 | | 描述 | 这些列表还分有序列表，无序列表和自定义列表。 无序列表 | |
