table-layout: auto | fixed | inherit; /* 控制表格的布局方式 */ border-collapse: collapse | separate | inherit; /* 控制表格边框的合并方式 */ border-spacing: value | inherit; /* 控制表格边框之间的距离 */ caption-side: top | bottom | inherit; /* 控制表格标题的位置 */ vertical-align: top | middle | bottom | text-top | text-bottom | inherit; /* 控制表格中内容的垂直对齐方式 */ text-align: left | center | right | justify | inherit; /* 控制表格中内容的水平对齐方式 */
例如,text-align
属性可以通过以下代码对表格内容进行水平对齐:
table { border-collapse: collapse; width: 100%; } td { text-align: center; }
这段代码实现了让所有单元格中的内容居中对齐。同样,如果想让表格顶部对齐,大家可以通过vertical-align: top;
来实现:
table { border-collapse: collapse; width: 100%; } td { vertical-align: top; }
除此之外,大家还可以通过table-layout: fixed;
设置表格布局为固定布局,border-collapse: collapse;
控制表格边框的合并方式,以及通过border-spacing: value;
控制表格边框之间的距离。
总之,CSS 提供了很多针对表格的属性,可以帮助大家调整表格中元素的位置和对齐方式,让表格更加美观、易读。