使用 CSS 设置表格样式-css教程-PHP中文网

示例

Output

Example

首页

web前端

css教程

使用 CSS 设置表格样式

Aug 19, 2023 pm 02:29 PM

我们可以使用CSS来定义表格的样式。以下属性用于为<table>及其元素定义样式：

border
CSS的border属性用于定义边框宽度、边框样式和边框颜色。
border-collapse
此属性用于指定<table>元素是否应具有共享或独立的边框。
caption
caption-side属性用于垂直定位表格标题框。
empty-cells
此属性用于指定表格的空单元格的显示方式。
table-layout用于定义浏览器在布局表格的行、列和单元格时使用的算法。

示例

以下示例演示了表格的样式：

实时演示

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;style&gt;
body {
   font-family: &#39;Bookman Old Style&#39;, serif;
}
th {
   letter-spacing: 1.9px;
}
#one {
   border-right: thick solid blue;
}
td {
   text-align: center;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h2&gt;Employee List&lt;/h2&gt;
&lt;div&gt;
&lt;table&gt;
&lt;tr&gt;
&lt;th id=&quot;one&quot;&gt;Employee&lt;/th&gt;
&lt;th&gt;Department&lt;/th&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;John &lt;/td&gt;
&lt;td&gt;Marketing&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Brad&lt;/td&gt;
&lt;td&gt;Finance&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Tim &lt;/td&gt;
&lt;td&gt;IT&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Steve&lt;/td&gt;
&lt;td&gt;Operations&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

登录后复制

Output

This gives the following output −

Styling Tables Working with CSS

Example

Live Demo

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;style&gt;
table {
   float: left;
   empty-cells: hide;
   box-shadow: inset 0 0 4px orange;
}
tr {
   box-shadow: inset 0 0 10px greenyellow;
}
td {
   font-style: italic;
   box-shadow: inset 0 0 8px red;
}
table,td {
   margin: 6px;
   padding: 6px;
   border: 1px solid black;
}
table
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;table&gt;
&lt;caption&gt;Demo Table&lt;/caption&gt;
&lt;tr&gt;
&lt;th&gt;Head 1&lt;/th&gt;
&lt;th&gt;Head 2&lt;/th&gt;
&lt;th&gt;Head 3&lt;/th&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;demo&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;td&gt;demo&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;/td&gt;
&lt;td&gt;demo&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/body&gt;
&lt;/html&gt;

登录后复制