HTML表用于在表格中布置表格数据。使用CSS,我们可以通过添加边框,控制表单元格文本对齐,高亮表行等样式HTML表。
表格边框
我们可以使用border属性为表,表行和表单元格添加边框。table, th, td { border: 1px solid black;
}html>
}
Value | Item |
---|---|
CSS | Style |
HTML | Structure |
表边框折叠
border-collapse属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。
其可能的值是折叠或单独。
浏览器在表格周围绘制边框加上每个单元格周围的边框,创建双边框效果。您可以通过应用border-collapse属性解决此问题。
以下代码使用border-collapse属性。HTML>
border-collapse: collapse;
}th, td { padding: 2px;
}
RankNameColorSize
Favorite:ABC5002nd Favorite:ABCD© 2011 www.html.cn Data Enterprises折叠值告诉浏览器您不想在相邻元素的每个边上绘制边框。
例子:
以下代码显示如何比较单独和折叠表边框。
column 1 | column 2 | column 3 |
cell 1 | cell 2 | cell 3 |
cell 1 | cell 2 | cell 3 |
separate
collapse
表宽度和高度
width和height属性控制表的宽度和高度。
下面的示例将表的宽度设置为100%,th元素的高度设置为50px:table { width: 100%;
}th { height: 50px;
}
表文本对齐
text-align和vertical-align属性控制表中的文本对齐。
text-align属性设置水平对齐方式,如left,right或center。
vertical-align属性设置垂直对齐方式,如顶部,中间或底部。td { text-align: right; vertical-align: bottom;
}