• 微信号
目录

html笔记

您当前的位置:首页 > 我的笔记 > html笔记>css-table 表格样式

css-table 表格样式

表格边框

为了使边框出现边框(基于样式),可以添加如下样式:

折叠边框

单纯给table、th 以及 td 元素添加边框,会出现双线边框,可使用 border-collapse 属性进行边框调整

table, th, td { border: 1px solid blue; }

表格宽度和高度

通过width和height属性定义表格的宽度和高度

/* 表格宽度设置为100%,同时将tr元素的高度设置为50px */
table { width: 100%; }
tr{ height: 50px; }

表格文本对齐方式

针对表格文本,可以对其设置对齐方式:text-align、vertical-align

text-align

text-align: 设置水平方向对齐方式

属性值

  • left : 默认值,水平方向左对齐
  • center : 水平方居中对齐
  • right : 水平方向右对齐

实例

/* 居中对齐 */
td { text-align: center; }

vertical-align

vertical-align: 设置垂直方向对齐方式

属性值

  • top : 垂直方向顶端对齐
  • middle : 垂直方向中部对齐
  • bottom : 垂直方向底端对齐
/* 底端对齐 */
td { vertical-align: bottom; }