html程序实现
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>表格</title> <style> table { border: 1px solid blue; } td { border: 1px solid blue; text-align: center; } th { border: 1px solid yellow; text-align: center; } .order.cap { color: red; font-size: larger; font-weight: bold; background-color: lightblue; } .order.head { background-color: yellowgreen; } .total { background-color: aquamarine; } </style> </head> <body> <table> <caption class="order cap"> 2023.3.12 订单 </caption> <thead class="order head"> <th>ID</th> <th>PO</th> <th>ITEM</th> <th>DESCRIPTION</th> <th>QTY</th> <th>PRICE</th> <th>TOTAL PRICE</th> </thead> <tbody> <tr> <td>1</td> <td rowspan="2">PO#001</td> <td>PN001</td> <td>apple</td> <td>10</td> <td>1</td> <td>10</td> </tr> <tr> <td>2</td> <td>PN002</td> <td>banana</td> <td>100</td> <td>1</td> <td>100</td> </tr> <tr> <td colspan="4" class="total">Total:</td> <td class="total">110</td> <td></td> <td colspan="2" class="total">110</td> </tr> <tr> <td>3</td> <td rowspan="2">PO#002</td> <td>PN003</td> <td>TV SET</td> <td>2</td> <td>1000</td> <td>2000</td> </tr> <tr> <td>4</td <td>PN004</td>a <td>Frige</td> <td>5</td> <td>2000</td> <td>10000</td> </tr> <tr> <td colspan="4" class="total">Total:</td> <td class="total">7</td> <td></td> <td colspan="2" class="total">12000</td> </tr> </tbody> </table> </body></html>
效果图
注意点
- 自定义class style的实现最前面要添加’.’
- style 里定义border需要设置类型，譬如’solid’，才可以显现出来
- td 的border和table 的border 是两个部分，在style里需要分别设置:
border: 1px solid blue; ，在table标签里只需要设置宽度就可以:border="1"
