讓網頁製作出的表格框變細,表格單、雙數行底色不同
一般網頁內製作出的表格 (table),其表格邊框都很粗或寛。
若您不想引入css,只是想讓該網頁的所有表格的表格框變細,或所有表格的單、雙行格底色不同,則可在該網頁的 </head> 前加入以下紅色部份的 <style>...</style> 程式碼,或直接複製下列所有程式碼,另存成一個 html 檔來觀看唄 ^^:
<!doctype html>
<html>
<head>
<meta charset="utf-8"> <title>喵喵笨兔 の 喵喵的家~遊戲天地 - 網頁表格邊框細框及底色</title> <style> td, th { border:1px solid #aaa; /*線框及顏色 */ font-family: 'Ubuntu', 'Lato', sans-serif; /*字型*/ } table { border-collapse:collapse; } tr:nth-child(odd){ background-color: #FF9; /* 表格單(odd)數格底色 */ } tr:nth-child(even){ background-color: coral; /* 表格雙(even)數格底色 */ } </style> </head> <body> <table width="50%">
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table> </body>
</html>