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中文網(wǎng)(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