本文目錄導(dǎo)讀：

1. 使用margin屬性
2. 使用border-spacing屬性
3. 使用cellpadding屬性（已廢棄）

CSS技巧分享：如何調(diào)整表格行（tr）之間的間距

在網(wǎng)頁設(shè)計(jì)中，調(diào)整表格行（tr）之間的間距是一個(gè)常見的需求，間距的調(diào)整可以使表格內(nèi)容更加清晰，易于閱讀，本文將指導(dǎo)你如何使用CSS來設(shè)置tr之間的間距。

使用margin屬性

在CSS中，我們可以使用margin屬性來增加元素之間的空間，包括行與行之間，對(duì)于表格行（tr），我們可以為它們?cè)O(shè)置上下外邊距（margin-top和margin-bottom）來調(diào)整間距。

table tr {
    margin-top: 10px;
    margin-bottom: 10px;
}

這將為表格中的每一行添加10像素的上下間距。

使用border-spacing屬性

除了使用margin屬性，我們還可以利用border-spacing屬性來調(diào)整表格行之間的間距，border-spacing屬性允許我們?cè)O(shè)置行和列之間的間距。

table {
    border-spacing: 10px 0; /* ***個(gè)值設(shè)置行間距，第二個(gè)值設(shè)置列間距 */
}

這將為表格的行和列之間添加10像素的間距，這種方法會(huì)影響整個(gè)表格的行和列間距，而不僅僅是行之間的間距。

使用cellpadding屬性（已廢棄）

雖然cellpadding屬性已經(jīng)被廢棄，但在某些情況下，它仍然可以用于調(diào)整單元格之間的間距，建議使用CSS的border-spacing或padding屬性替代它。

<table cellpadding="10"> ... </table>

這將為單元格之間添加10像素的間距，但是請(qǐng)注意，使用cellpadding屬性可能會(huì)導(dǎo)致兼容性問題，建議優(yōu)先考慮使用CSS的border-spacing或padding屬性。

調(diào)整表格行（tr）之間的間距是網(wǎng)頁設(shè)計(jì)中常見的需求，我們可以使用CSS的margin屬性、border-spacing屬性或cellpadding屬性來實(shí)現(xiàn)這一目標(biāo)，為了提高兼容性和更好的控制，建議使用CSS的margin和border-spacing屬性。