|
曾经为添加简单的表格线，困难重重，原来用CSS实现这么简单，现介绍如下(复制到html中即可查看）： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Grid</title> <style type="text/css"> body { font: 0.8em 宋体; } table.grid{ /* 折叠所有表格边框--使单元格共享边框*/ border-collapse:collapse; } table.grid td,th { /* 给单元格设置边框线 */ border: 1px solid #99CCCC; text-align:left; padding:4px 4px; } table.grid th[scope="col"] { /*给列表头文字加粗，加背景色 */ font:bold; background-color:#00ddcc; } table.grid caption { font-size:1.2em; margin-bottom: .5em; } </style> </head> <body><table class="grid"> <caption> <strong>我的书籍</strong> </caption> <tr> <th scope="col"> </th> <th scope="col">Stylin'</th> <th scope="col">Codin'</th> <th scope="col">Stylin'</th> <th scope="col">Codin'</th> </tr> <tr> <th scope="row">Languages</th> <td>XHTML & CSS</td> <td>PHP & SQL</td> <td>XHTML & CSS</td> <td>PHP & SQL</td> </tr> <tr> <th scope="row">Focus</th> <td>Interface design</td> <td>Back‑end code</td> <td>Interface design</td> <td>Back‑end code</td> </tr> <tr> <th scope="row">Languages</th> <td>XHTML & CSS</td> <td>PHP & SQL</td> <td>XHTML & CSS</td> <td>PHP & SQL</td> </tr> <tr> <th scope="row">Focus</th> <td>Interface design</td> <td>Back‑end code</td> <td>Interface design</td> <td>Back‑end code</td> </tr> </table> </body></html> |
|
|
来自： 昵称10134216 > 《Html CSS》
