前端制作表格左对齐代码
时间: 2024-09-25 16:15:50 浏览: 40
满屋花网页制作源代码,主要是学习div和css的编写
在前端制作表格并让其内容左对齐,你可以使用HTML `<table>` 标签以及CSS来控制。下面是一个简单的例子:
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<style>
table {
border-collapse: collapse; /* 合并边框 */
width: 100%; /* 设置宽度为100%,如果需要自适应,可以去掉百分比 */
}
th, td {
text-align: left; /* 左对齐单元格内容 */
padding: 8px; /* 添加内边距美化 */
border: 1px solid #ccc; /* 边框样式 */
}
</style>
</head>
<body>
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
</tr>
<tr>
<td>张三</td>
<td>30</td>
<td>北京</td>
</tr>
<!-- 可以添加更多的行... -->
</table>
</body>
</html>
```
在这个示例中,`text-align: left;` 属性用于设置文本内容为左对齐。如果你想针对特定列进行左对齐,可以在相应的 `td` 元素上直接应用该样式。
阅读全文