CSS(層疊樣式表)是用于描述網(wǎng)頁中如何顯示的標(biāo)記語言,同樣它也可以用于創(chuàng)建表格。在 CSS 中,<table>
元素是用來創(chuàng)建表格的標(biāo)準(zhǔn)方式。我們通常會使用一些屬性來控制表格中的行、列、單元格等等。以下是如何使用 CSS 來創(chuàng)建表格。
/* 設(shè)置表格邊框 */ table { border-collapse: collapse; border: 2px solid black; } /* 設(shè)置表頭 */ th { background-color: #B0C4DE; font-weight: bold; } /* 設(shè)置單元格屬性 */ td { border: 1px solid black; padding: 2px 5px; } /* 根據(jù)需要設(shè)置表格寬度 */ table { width: 100%; } /* 設(shè)置第一列寬度 */ td:first-child { width: 150px; }
<table>
元素中的每一個<tr>
元素代表一個表格行。表格中的每個單元格被包含在一個<td>
元素中。表頭也是表格中的一部分,用<th>
元素來標(biāo)識。
以上代碼中,我們通過將border-collapse
屬性設(shè)置為collapse
來創(chuàng)建邊框;以及通過設(shè)置border
,background-color
,font-weight
,width
等屬性,來控制表格的外觀和布局。
如果您需要更加靈活的表格布局和樣式,也可以通過 CSS 框架,如 Bootstrap, Foundation 等,來使用預(yù)定義的表格樣式和類。