&lt;style&gt; table { width: 100%; border-collapse: collapse; } th, td { border: 1px solid black; padding: 8px; text-align: left; } th { background-color: #f2f2f2; } tr:nth-child(even) { background-color: #f9f9f9; }</style>

border-collapse 设置为 collapse 以肃清单元格之间的间隙。
th, td 设置了边框、添补和文本对齐。
th 设置了表头的背景色。
tr:nth-child(even) 为偶数行设置了条纹效果。
实例文档编辑器实例

假设我们须要创建一个3x3的表格,显示一个小型团队的成员信息。

插入一个3行3列的表格。
输入数据:姓名、职位、邮箱。
设置第一行为表头,加粗并添补淡蓝色背景。
设置所有单元格的文本为居中对齐。
为表格添加外边框,并为行添加细边框。
HTML实例

<!DOCTYPE html><html><head><style> table { width: 50%; border-collapse: collapse; margin: 25px 0; } th, td { border: 1px solid #ddd; padding: 8px; text-align: left; } th { background-color: #4CAF50; color: white; } tr:nth-child(even) { background-color: #f2f2f2; }</style></head><body><table> <tr> <th>Name</th> <th>Position</th> <th>Email</th> </tr> <tr> <td>Alice</td> <td>Manager</td> <td>alice@example.com</td> </tr> <tr> <td>Bob</td> <td>Developer</td> <td>bob@example.com</td> </tr> <tr> <td>Charlie</td> <td>Designer</td> <td>charlie@example.com</td> </tr></table></body></html>

html怎样控制单元格大小不变12HTML创立和格局化表格 Node.js

在这个HTML实例中,我们创建了一个带有条纹效果的表格,表头有绿色背景和白色笔墨,每个单元格都有适当的添补和边框。

结论

创建和格式化表格是一项基本技能,无论是在文档编辑器还是HTML中。
一个良好格式化的表格不仅能有效传达信息,还能提升整体文档或网页的都雅性和专业性。
通过实践这些技巧和利用示例作为参考,你可以创建出既实用又吸引人的表格。