html 表格
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML表格</title> <style type="text/css"> table{ border-collapse: collapse; } th,td{ padding: 5px 10px; } </style> </head> <body> <table border="1"> <caption>表格标题</caption> <!-- 加粗列 --> <thead> <tr> <th>水果</th> <th>蔬菜</th> <th>文具</th> </tr> </thead> <!-- 表格主题 --> <tbody> <tr> <td>苹果</td> <td>花菜</td> <td>钢笔</td> </tr> <tr> <td>橙子</td> <td>青菜</td> <td>毛笔</td> </tr> </tbody> </table> </body> </html>case 1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>table_case</title> <style type="text/css"> table,td{ border-collapse: collapse; border: 1px solid #ccc; } td{ padding: 5px 10px; } </style> </head> <body> <table> <tbody> <tr> <td colspan="3">111</td> </tr> <tr> <td rowspan="2">222</td> <td colspan="2">333</td> </tr> <tr> <td>444</td> <td>555</td> </tr> </tbody> </table> </body> </html>case2
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>table_case2</title> <style type="text/css"> table{ /* border-collapse: collapse; */ } table,tr,td{ border: 1px solid #ccc; } td{ width: 100px; height: 100px; } </style> </head> <body> <table> <tr> <td colspan="2">111</td> <td rowspan="2">222</td> </tr> <tr> <td rowspan="2">333</td> <td>444</td> </tr> <tr> <td colspan="2">555</td> </tr> </table> </body> </html>