HTML table
HTML tables
Tables are defined by the <table> tag. Each table has a number of rows (defined by <tr> tags), and each row is divided into a number of cells (defined by <td> tags). The letters td refer to table data, the contents of data cells. Data cells can contain text, pictures, lists, paragraphs, forms, horizontal lines, tables, and more.
Here is an example:
<html> <head> <meta charset="utf-8"> <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>
Try it
Borderless table
If the border attribute is not specified when defining the table, then the table will have no border
##<table> <tr><td>zdd< ;/td><td>30</td></tr>
#</table>
Empty cellIf there is no cell Specify the content, then the cell will be empty and have no borders
What if it is solved? The method is to add spaces to empty cells. Since HTML ignores extra spaces, we cannot add spaces directly, but add nbsp to indicate non-breaking space.
##<table border="1">
#Table with title
##<table border="1"><caption>My table</caption> <tr><td> ;zdd</td><td>30</td></tr>
<tr><td> </td><td>20</td></ tr>
##Use colspan to cross rows
<table border="1">
<tr><td>Bill Gates</td><td>555 77 854</td><td>555 77 855</td></tr></table> Use rowspan to span columns <table border="1"> ##HTML table header <table border="1"><tr> ##
<tr><th>Name</th><td> Bill Gates</td></tr>
<tr><th rowspan="2">Phone</th><td>555 77 854</td></tr>
<tr><td>555 77 855</td></tr>
</table>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</ td>
<td>row 2, cell 2</td>
</tr>
</table>
