CSS表格tbody是CSS中常用的一種表格元素,它主要用于定義表格的內容部分。在HTML中,一個表格通常都是由thead、tbody和tfoot三個部分組成的,其中thead表示表格的頭部,tfoot表示表格的底部,而tbody則是表格的內容部分,其中包含了所有的表格行。
1 John Doe 2 Jane Doe 3 Bob Smith
如上所示,該表格中的tbody部分包含了三個表格行,每個表格行包含了三個單元格,分別表示編號、名字和姓氏。
通過CSS表格tbody,我們可以對表格內容進行樣式設置,常用的CSS屬性包括:
- background-color:設置表格行的背景顏色;
- color:設置表格行的字體顏色;
- font-size:設置表格行的字體大小;
- text-align:設置表格行內容的水平對齊方式;
- vertical-align:設置表格行內容的垂直對齊方式;
如下代碼是一個使用了CSS表格tbody的示例,用來展示如何對表格內容進行樣式設置:
table { border-collapse: collapse; width: 100%; } thead { background-color: #f2f2f2; } th, td { padding: 8px; text-align: left; border-bottom: 1px solid #ddd; } tr:nth-child(even) { background-color: #f2f2f2; } tbody tr:hover { background-color: #ddd; } tbody td { vertical-align: middle; }
在上述代碼中,我們首先使用了border-collapse屬性來設置表格的邊框,然后對表頭進行了樣式設置。接著設置了表格行和單元格的內邊距和邊框樣式,以及表格偶數行和鼠標懸停的樣式。最后,我們使用了vertical-align屬性來設置表格內容的垂直對齊方式。