河南省驻马店网站建设_网页定制制作与开发多少钱_做到满意为止

河南省驻马店网站建设_网页定制制作与开发多少钱_做到满意为止

使用 CSS 可以极大地改善 HTML 表格的外观：

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

亲自试一试

表格边框

如需在 CSS 中设置表格边框，请使用 border 属性。

下例为 <table>、<th> 和 <td> 元素规定了黑色边框：

Firstname Lastname

Bill Gates

Steve Jobs

实例

table, th, td {

  border: 1px solid black;

}

亲自试一试

注意：上例中的表格拥有双边框。这是因为 table 和 <th> 和 <td> 元素都有单独的边框。

全宽表格

在某些情况下，上表似乎很小。如果您需要一个可以覆盖整个屏幕（全宽）的表格，请为 <table> 元素添加 width: 100%：

实例

table {

  width: 100%;

}

亲自试一试

双边框

请注意上面的表格有双边框。这是因为表格和 th、td 元素都有单独的边框。

如需删除双边框，请看下面的例子。

合并表格边框

border-collapse 属性设置是否将表格边框折叠为单一边框：

Firstname Lastname

Bill Gates

Steve Jobs

实例

table {

  border-collapse: collapse;

}

table, th, td {

  border: 1px solid black;

}

亲自试一试

如果只希望表格周围有边框，则仅需为 <table> 指定 border 属性：

Firstname Lastname

Bill Gates

Steve Jobs

河南省驻马店网站建设_网页定制制作与开发多少钱_做到满意为止