HTML table
Tables are very common in our daily lives, but how to output tables in our web pages? The
<table> tag defines an HTML table.
A simple HTML table consists of the table element and one or more tr, th, or td elements.
tr Element defines table row, th # The ## element defines the header, and the td element defines the table unit.
Let us make the simplest form
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>php.cn</title> </head> <body> <table border="1" cellspacing="0" cellpadding="10"> <tr> <td>1月份</td> <td>￥100</td> </tr> <tr> <td>二月份</td> <td>￥200</td> </tr> </table> </body> </html>Program running results:
cellspacing, the distance between cells
cellpadding , the distance between the text and the cell border is in pixels
border Add a border to the text Set the border to border=0 and the table will not display the border
The above three attribute values can be set by yourself according to your own requirementsHTML table header
The header of the table is defined using the <th> tag. Most browsers will display the header as bold, centered text:Example
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>php.cn</title> </head> <body> <table border="1" cellspacing="0" cellpadding="10"> <th>月份</th> <th>金额</th> <tr> <td>1月份</td> <td>￥100</td> </tr> <tr> <td>二月份</td> <td>￥200</td> </tr> </table> </body> </html>
Program running result:
# colspan and rowspan
#By adding colspan and rowspan attributes to the <td> tag , you can merge cells horizontally and vertically
InstanceBefore merging
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>php.cn</title> </head> <body> <table border="1" cellspacing="0" cellpadding="20"> <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>Program running result:
After merging
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>php.cn</title> </head> <body> <table border="1" cellspacing="0" cellpadding="20"> <tr> <td colspan="2">单元格</td> <td>单元格</td> </tr> <tr> <td rowspan="2">单元格</td> <td>单元格</td> <td rowspan="2">单元格</td> </tr> <tr> <td>单元格</td> </tr> </table> </body> </html>
Look at the code running results again:
Look for the rules
##More Multiple instances
This example demonstrates a table without borders.<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>php.cn</title> </head> <body> <h4>这个表格没有边框:</h4> <table> <tr> <td>200</td> <td>300</td> </tr> <tr> <td>500</td> <td>600</td> </tr> </table> <h4>这个表格没有边框:</h4> <table border="0"> <tr> <td>200</td> <td>300</td> </tr> <tr> <td>500</td> <td>600</td> </tr> </table> </body> </html>Program running result:
Example
This example Demonstrates how to display elements within different elements.<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <table border="1"> <tr> <td> <p>这是一个段落</p> <p>这是另一个段落</p> </td> <td>这个单元格包含一个表格: <table border="1"> <tr> <td>A</td> <td>B</td> </tr> <tr> <td>C</td> <td>D</td> </tr> </table> </td> </tr> <tr> <td>这个单元格包含一个列表 <ul> <li>apples</li> <li>bananas</li> <li>pineapples</li> </ul> </td> <td>HELLO</td> </tr> </table> </body> </html>Code running results:
##HTML table tag
| Tag | Description |
| Define the table | |
| Define the header of the table | |
| Define table rows | |
| Define table cells |
| <caption> | Define the table title |
| <colgroup> | Define the table columns Group |
| ## Define the header of the table | ## <tbody> |
| <tfoot> | Define the footer of the table |
| ##Next Section <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>php.cn</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="20">
<tr>
<td>1月份</td>
<td>￥100</td>
</tr>
<tr>
<td>二月份</td>
<td>￥200</td>
</tr>
</table>
</body>
</html> None |
