Tambahkan spasi di antara baris tabel html

Question

Properti border-spacing_ CSS mengatur jarak antara batas sel yang berdekatan dalam <table>. Properti ini hanya berlaku bila border-collapse adalah separate

Table of Contents Show

Bagaimana cara memberi spasi di antara kolom dalam tabel di HTML?
Bagaimana Anda menempatkan spasi di antara dua TD dalam HTML?

Nilai border-spacing_ juga digunakan di sepanjang tepi luar tabel, di mana jarak antara batas tabel dan sel di kolom atau baris pertama/terakhir adalah jumlah dari border-spacing yang relevan (horizontal atau vertikal) dan yang relevan (atas,

Catatan. Properti border-spacing setara dengan atribut

border-spacing = 
  <length>{1,2}

2 yang tidak digunakan lagi dari elemen <table>, kecuali bahwa border-spacing memiliki nilai kedua opsional yang dapat digunakan untuk mengatur jarak horizontal dan vertikal yang berbeda

/* <length> */
border-spacing: 2px;

/* horizontal <length> | vertical <length> */
border-spacing: 1cm 2em;

/* Global values */
border-spacing: inherit;
border-spacing: initial;
border-spacing: revert;
border-spacing: revert-layer;
border-spacing: unset;

Properti border-spacing_ dapat ditentukan sebagai satu atau dua nilai

Ketika satu nilai
```
border-spacing = 
  <length>{1,2}  
```
_6 ditentukan, ini menentukan jarak horizontal dan vertikal antar sel
Ketika dua nilai
```
border-spacing = 
  <length>{1,2}  
```
_6 ditentukan, nilai pertama menentukan jarak horizontal antar sel (i. e. , ruang antar sel dalam kolom yang berdekatan), dan nilai kedua menentukan jarak vertikal antar sel (mis. e. , ruang antar sel dalam baris yang berdekatan)

border-spacing = 
  <length>{1,2}

_6

Ukuran spasi sebagai nilai tetap

Nilai awal

border-spacing = 
  <length>{1,2}

_9Berlaku untuk

<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>

0 dan

<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>

1 elemenInheritedyesNilai yang dihitungdua panjang absolutJenis animasidiskrit

border-spacing = 
  <length>{1,2}

Contoh ini menerapkan spasi

<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>

_2 secara vertikal dan

<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>

3 secara horizontal di antara sel tabel. Perhatikan bagaimana, di sepanjang tepi luarnya, nilai

border-spacing = 
  <length>{1,2}

0 tabel ditambahkan ke nilai border-spacing nya

Bagaimana cara memberi spasi di antara kolom dalam tabel di HTML?

Hal ini dapat dicapai dengan menempatkan pengisi di antara kolom menggunakan CSS . Anda dapat menambahkan padding di sebelah kiri semua kolom kecuali yang pertama, atau menambahkan padding di sebelah kanan semua kolom kecuali yang terakhir.