表格样式
序号 | 名称 | 数量 | 价格 | 备注 |
---|---|---|---|---|
1 | 苹果 | 1000 | ¥5.00 | 销售 |
1 | 苹果 | 1000 | ¥5.00 | 销售 |
1 | 苹果 | 1000 | ¥5.00 | 销售 |
1 | 苹果 | 1000 | ¥5.00 | 销售 |
1 | 苹果 | 1000 | ¥5.00 | 销售 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格样式</title> <style text="text/css"> .goods_list{ width: 600px; height: 200px; border: 1px solid #555; border-collapse: collapse; <!-- 设置边框现合并 --> font-family: 'Microsoft Yahei'; <!-- 设置字体 --> } .goods_list th,.goods_list td{ border: 1px solid #111; <!-- 设置边框线像素 --> text-align: center; <!-- 设置表格文字居中 --> } .goods_list th{ background-color: #3366cc; <!-- 设置表头背景色 --> color: #ffffff <!-- 设置表头字体颜色 --> } </style> </head> <body> <table class="goods_list"> <tr> <th>序号</th> <th>名称</th> <th>数量</th> <th>价格</th> <th>备注</th> </tr> <tr> <td>1</td> <td>苹果</td> <td>1000</td> <td>¥5.00</td> <td>销售</td> </tr> <tr> <td>1</td> <td>苹果</td> <td>1000</td> <td>¥5.00</td> <td>销售</td> </tr> <tr> <td>1</td> <td>苹果</td> <td>1000</td> <td>¥5.00</td> <td>销售</td> </tr> <tr> <td>1</td> <td>苹果</td> <td>1000</td> <td>¥5.00</td> <td>销售</td> </tr> <tr> <td>1</td> <td>苹果</td> <td>1000</td> <td>¥5.00</td> <td>销售</td> </tr> </table> </body> </html>