Table ng CSS

Mga CSS ay maaaring lubos na mapabuti ang anyo ng HTML tables:

Company Contact Address City
Alibaba Ma Yun No. 699, Wangshang Road, Binjiang District Hangzhou
APPLE Tim Cook 1 Infinite Loop Cupertino, CA 95014 Cupertino
BAIDU Li YanHong Lixiang guoji dasha, No 58, beisihuanxilu Beijing
Canon Tsuneji Uchida One Canon Plaza Lake Success, NY 11042 New York
Google Larry Page 1600 Amphitheatre Parkway Mountain View, CA 94043 Mountain View
HUAWEI Ren Zhengfei Putian Huawei Base, Longgang District Shenzhen
Microsoft Bill Gates 15700 NE 39th St Redmond, WA 98052 Redmond
Nokia Olli-Pekka Kallasvuo P.O. Box 226, FIN-00045 Nokia Group Helsinki
SONY Kazuo Hirai Park Ridge, NJ 07656 Park Ridge
Tencent Ma Huateng Tencent Building, High-tech Park, Nanshan District Shenzhen

亲自试一试

Table border

Upang itakda ang border ng talahanayan sa CSS, gamitin ang border Attribute.

Ang sumusunod na halimbawa ay nagtatakda ng black border sa <table>, <th> at <td> element:

Firstname Lastname
Bill Gates
Steve Jobs

实例

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

亲自试一试

Note:Ang talahanayan sa nakaraang halimbawa ay may dual border. Ito ay dahil ang table at ang <th> at <td> element ay may magkakahiwalay na border.

Full width table

Sa ilang mga kaso, ang talahanayan sa itaas ay mukhang maliit. Kung gusto mong magkaroon ng talahanayan na mayroong buong lapad na ekrano (full width), magdagdag ng width: 100% sa <table> element:

实例

table {
  width: 100%;
}

亲自试一试

Dual border

Pansin: Ang talahanayan sa itaas ay may dual border. Ito ay dahil ang talahanayan at ang th, td element ay may magkakahiwalay na border.

Kung gusto mong alisin ang dual border, tingnan ang sumusunod na halimbawa.

Merge table borders

border-collapse Ang attribute ay nagtatakda kung ipapahina ang border ng talahanayan sa isang solong border:

Firstname Lastname
Bill Gates
Steve Jobs

实例

table {
  border-collapse: collapse;
}
table, th, td {
  border: 1px solid black;
}

亲自试一试

Kung ikaw ay gusto lamang na mayroong border sa palibot ng talahanayan, lagyan lamang ng <table> sa border padding

Firstname Lastname
Bill Gates
Steve Jobs

实例

table {
  border: 1px solid black;
}

亲自试一试

Table width and height

Ang lapad at taas ng talahanayan ay dinudurog ng width and height Attribute definition.

Ang sumusunod na halimbawa ay gagawin upang itakda ang lapad ng talahanayan sa 100% at itakda ang taas ng <th> element sa 50px:

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

实例

table {
  width: 100%;
}
th {
  height: 50px;
}

亲自试一试

Upang lumikha ng talahanayan na tanging sumasakop sa kalahating pahaba ng pahina, gamitin ang width: 50%:

实例

table {
  width: 50%;
}
th {
  height: 70px;
}

亲自试一试

Horizontal alignment

text-align Ang attribute ay nagtatakda ng horizontal alignment ng nilalaman ng <th> o <td> (kanan, kaliwa o sa gitna).

Sa normal na kalagayan, ang nilalaman ng <th> element ay nakalagay sa gitna, habang ang nilalaman ng <td> element ay nakalagay sa left alignment.

Upang gawin ang nilalaman ng <td> element ay nakalagay sa gitna, gamitin ang text-align: center:

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

实例

th {
  text-align: center;
}

亲自试一试

Ang sumusunod na halimbawa ay gagawin upang itakda ang text alignment ng <th> element sa left alignment:

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

实例

th {
  padding: 15px;
}

亲自试一试

Vertical alignment

vertical-align Ang attribute ay nagtatakda ng vertical alignment ng nilalaman ng <th> o <td> (taas, ibaba o sa gitna).

Sa normal na kalagayan, ang vertical alignment ng nilalaman ng talahanayan ay sa gitna (ang mga <th> at <td> element ay parehong nasa gitna).

Ang mga sumusunod na halimbawa ay gagawin upang itakda ang vertical text alignment ng <td> element sa bottom alignment:

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

实例

td {
  height: 50px;
  vertical-align: bottom;
}

亲自试一试

table 内边距

表格内边距 如需控制边框和表格内容之间的间距，请在 <td> 和 <th> 元素上使用 padding

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

实例

属性，以实现水平分隔线：
  属性：
  padding: 15px;
}

亲自试一试

text-align: left;

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

水平分隔线 向 <th> 和 <td> 添加 border-bottom

实例

属性，以实现水平分隔线：
  th, td {
}

亲自试一试

border-bottom: 1px solid #ddd;

可悬停表格 在 <tr> 元素上使用 :hover

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

实例

tr:hover {background-color: #f5f5f5;}

亲自试一试

条状表格

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

为了实现斑马纹表格效果，请使用 nth-child() 选择器，并为所有偶数（或奇数）表行添加 background-color：

实例

tr:nth-child(even) {background-color: #f2f2f2;}

亲自试一试

表格颜色

下例指定了 <th> 元素的背景颜色和文本颜色：

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

实例

th {
  background-color: #4CAF50;
  color: white;
}

亲自试一试

响应式表格

如果屏幕太小而无法显示全部内容，则响应式表格会显示水平滚动条：

First Name Last Name Points Points Points Points Points Points Points Points Points Points
Bill Gates 50 50 50 50 50 50 50 50 50 50
Steve Jobs 94 94 94 94 94 94 94 94 94 94
Elon Musk 67 67 67 67 67 67 67 67 67 67

在 <table> 元素周围添加带有 overflow-x:auto 的容器元素（例如 <div>），以实现响应式效果：

实例

<div style="overflow-x:auto;">
<table>
... table content ...
</table>
</div>

亲自试一试

注释：在 OS X Lion（在 Mac 上）中，滚动条默认情况下是隐藏的，并且仅在使用时显示（即使设置了 "overflow:scroll"）。

更多实例

做一张花式表格
本例演示如何创建花式表格。
设置表格标题的位置
本例演示了如何放置表格标题。

CSS 表格属性

属性 描述
border Abbreviated attribute. Set all border properties in one declaration.
border-collapse Specify whether the table borders should be folded.
border-spacing Specify the distance between adjacent cells.
caption-side Specify the position of the table title.
empty-cells Specify whether borders and background are displayed on the blank cells in the table.
table-layout Set layout algorithm for table.