Web開發(fā)中,將內(nèi)容以表格形式展示是很常見的做法。在CSS中,我們可以使用tables進(jìn)行樣式設(shè)置。下面我們來看看tables的文件格式:
table { width: 100%; border-collapse: collapse; } td, th { border: 1px solid #ddd; padding: 8px; text-align: left; } th { background-color: #4CAF50; color: white; }
上面的代碼中,我們首先對整個表格設(shè)置了寬度為100%以充分利用頁面空間。border-collapse屬性用于控制單元格之間的邊框是否合并,這里我們設(shè)置為collapse以合并邊框。
接下來我們單獨(dú)設(shè)置了td和th的樣式。border屬性用于設(shè)定單元格邊框的大小、顏色和樣式,這里我們設(shè)置了1像素寬的邊框并使其呈現(xiàn)灰色。padding屬性用于控制單元格內(nèi)邊距大小,這里我們設(shè)置為8像素。text-align屬性用于控制單元格內(nèi)文本的對齊方式,這里我們設(shè)置為左對齊。
最后我們單獨(dú)設(shè)置了th標(biāo)簽的樣式,添加了背景顏色和文本顏色,使其看起來更加醒目。
總的來說,tables文件格式可以讓我們非常方便地對表格進(jìn)行樣式設(shè)置,提高表格的可讀性和美觀度。