Help:表格：修订间差异

=== 边框 ===

CSS的<code>border</code>属性可以设置表格的边框。定义边框的时候，需要设置边框的类型、颜色和宽度。

{{notice|<code>wikitable</code>类的表格的每个单元格都会自动拥有灰色的边框。}}

==== 简单边框用法 ====

下面这个是一个最简单的用法，它给整个表格添加了一个红色的、2像素宽的实线边框：

-{}-{| class="wikitable" <mark>style="border: 2px red solid"</mark>

! 标题文本 !! 标题文本

| 示例 || 示例

|-

| 示例 || 示例

{| class="wikitable" style="border: 2px red solid"

! 标题文本 !! 标题文本

| 示例 || 示例

|-

| 示例 || 示例

在这个例子中，<code>border: 2px red solid</code>相当于<code>border-width: 2px; border-color: red; border-style: solid</code>。

此外，你也可以给单个单元格添加边框，例如在这个例子中，只给最后一个单元格添加了绿色、虚线的边框：

-{}-{| class="wikitable"

! 标题文本 !! 标题文本

|-

| 示例 || 示例

|-

| 示例 || <mark>style="border: 2px green dashed" |</mark> 示例

|}

{| class="wikitable"

! 标题文本 !! 标题文本

|-

| 示例 || 示例

|-

| 示例 || style="border: 2px green dashed" | 示例

|}

==== 移除边框 ====

使用<code>border: none</code>可以给一个已经有边框的单元格移除边框。默认情况下，表格是没有边框的，但是<code>wikitable</code>类会自动给每个单元格添加边框。如果我们使用<code>border: none</code>，就可以移除掉单元格的边框。

-{}-{| class="wikitable"

! 标题文本 !! 标题文本

|-

| <mark>style="border: none" |</mark> 我没边框 || 示例

|-

| 示例 || 示例

|}

{| class="wikitable"

! 标题文本 !! 标题文本

|-

| style="border: none" | 我没边框 || 示例

|-

| 示例 || 示例

|}

==== 为不同方向设置边框 ====

表格和单元格的边框并非只能为各个方向同时设置，可以为不同的方向设置边框，甚至可以为不同的方向的边框设置属性。

<code>border-left</code>表示左侧的边框，它包括了<code>border-left-color</code>、<code>border-left-width</code>、<code>border-left-style</code>等属性。同样地，还有<code>border-top</code>、<code>border-right</code>和<code>border-bottom</code>，分别表示上侧、右侧和下侧的边框。

此外，也可以使用<code>border-block</code>（包含<code>border-block-start</code>和<code>border-block-end</code>）和<code>border-inline</code>（包含<code>border-inline-start</code>、<code>border-inline-end</code>），表示当前书写方向的块状或者行内元素元素方向的边框。在默认的书写模式下，<code>border-block-start</code>相当于<code>border-top</code>，<code>border-block-end</code>相当于<code>border-bottom</code>，<code>border-inline-start</code>相当于<code>border-left</code>，<code>border-inline-end</code>相当于<code>border-right</code>。

这个例子分别为表格定义了四个方向上的边框，上、右、下、左方向的边框分别为红色、绿色、蓝色和黑色，粗细和边框类似各不相同。

-{}-{| class="wikitable" <mark>style="border-top: 2px red solid; border-right: 3px green dashed; border-bottom: 4px blue double; border-left: 5px black inset"</mark>

! 标题文本 !! 标题文本

|-

| 示例 || 示例

|-

| 示例 || 示例

|}

{| class="wikitable" style="border-top: 2px red solid; border-right: 3px green dashed; border-bottom: 4px blue double; border-left: 5px black inset"

! 标题文本 !! 标题文本

|-

| 示例 || 示例

|-

| 示例 || 示例

|}

下面这个例子类似，但是使用的是<code>border-block</code>和<code>border-inline</code>，因此在不同的书写模式下，其边框所应用的方向也是不同的。

-{}-{| class="wikitable" <mark>style="border-block-start: 2px red solid; border-inline-end: 3px green dashed; border-block-end: 4px blue double; border-inline-start: 5px black inset"</mark>

! 标题文本 !! 标题文本

|-

| 示例 || 示例

|-

| 示例 || 示例

|}

为了便于演示，这里以水平文本（默认情况）和垂直文本的形式分别展示这个表格：

<div style="display: flex; place-content: space-evenly">

{| class="wikitable" style="border-block-start: 2px red solid; border-inline-end: 3px green dashed; border-block-end: 4px blue double; border-inline-start: 5px black inset"

! 标题文本 !! 标题文本

|-

| 示例 || 示例

|-

| 示例 || 示例

|}

{| class="wikitable" style="writing-mode: tb; border-block-start: 2px red solid; border-inline-end: 3px green dashed; border-block-end: 4px blue double; border-inline-start: 5px black inset"

! 标题文本 !! 标题文本

|-

| 示例 || 示例

|-

| 示例 || 示例

|}

</div>

你还可以指定不同方向的边框的同一种属性。和大多数CSS属性一样，遵循“上、右、下、左”的顺序。在下面这个例子中，表格的所有方向的边框都是2px宽的实线，但是各个方向的颜色均不相同：

-{}-{| class="wikitable" <mark>style="border: 2px solid; border-color: orange greenyellow navy magenta"</mark>

! 标题文本 !! 标题文本

|-

| 示例 || 示例

|-

| 示例 || 示例

|}

{| class="wikitable" style="border: 2px solid; border-color: orange greenyellow navy magenta"

! 标题文本 !! 标题文本

|-

| 示例 || 示例

|-

| 示例 || 示例

|}

==== 留意边框与宽度 ====

通常情况下，表格等块状元素的宽度和高度可能''不包括''边框，因此如果添加了边框，其实际的宽度和高度可能会超过指定的值。如果块状元素的宽度和高度超过的指定的值，可以设置<code>box-sizing</code>属性，以指定其宽度和高度是否包括了边框。

<div style="display: flex; flex-direction: column; text-align: center; align-items: center; gap: 0.5em">

<div style="background: wheat; overflow: visible; width: 15em">15em宽度参考</div>

<div style="background: wheat; overflow: visible; width: 15em; border: 3em magenta solid">15em + 3em边框</div>

<div style="background: wheat; overflow: visible; width: 15em; border: 3em magenta solid; box-sizing: content-box">15em + 3em边框，box-sizing = content-box</div>

<div style="background: wheat; overflow: visible; width: 15em; border: 3em magenta solid; box-sizing: border-box">15em + 3em边框，box-sizing = border-box</div>

</div>

=== 背景 ===

<code>background</code>样式可以设置表格的填充。