Атрибут cellspacing тега <table> — відступ між комірками

HTML

<p>У цьому прикладі, Ви можете змінювати значення для властивості cellspacing в межах від 0 до 100 переміщаючи повзунок.</p>
<p id="text">hmghk</p>
<input type="range" min="0" max="100" step="1" value="2" id="range" onmousemove="f()"> 

<hr>

<table id = "table" border="2" cellspacing="2">
<caption><p>З використанням атрибуту cellspacing</p><hr>Графік роботи</caption>
<thead>
  <tr>
    <th>День тиждня</th>
    <th>Роботчий час</th>
    <th>Обідня перерва</th>
  </tr>
</thead>
<tr>
  <td>Понеділок</td>
  <td>8:00 - 16:00</td>
  <td>12:00 - 13:00</td>
</tr> 
<tr>
  <td>Вівторок</td>
  <td>9:00 - 17:00</td>
  <td>13:00 - 14:00</td>
</tr>
<tr>
  <td>Середа</td>
  <td>11:00 - 19:00</td>
  <td>15:00 - 16:00</td>
</tr> 
<tr>
  <td>Четверг</td>
  <td>9:00 - 18:00</td>
  <td>13:30 - 14:30</td>
</tr> 
<tr>
  <td>П'ятниця</td>
  <td>9:00 - 13:00</td>
  <td>12:00 - 13:30</td>
</tr> 
</table>

<table border="2">
<caption><p>Без використанням атрибуту cellspacing</p><hr>Графік роботи</caption>
<thead>
  <tr>
    <th>День тиждня</th>
    <th>Роботчий час</th>
    <th>Обідня перерва</th>
  </tr>
</thead>
<tr>
  <td>Понеділок</td>
  <td>8:00 - 16:00</td>
  <td>12:00 - 13:00</td>
</tr> 
<tr>
  <td>Вівторок</td>
  <td>9:00 - 17:00</td>
  <td>13:00 - 14:00</td>
</tr>
<tr>
  <td>Середа</td>
  <td>11:00 - 19:00</td>
  <td>15:00 - 16:00</td>
</tr> 
<tr>
  <td>Четверг</td>
  <td>9:00 - 18:00</td>
  <td>13:30 - 14:30</td>
</tr> 
<tr>
  <td>П'ятниця</td>
  <td>9:00 - 13:00</td>
  <td>12:00 - 13:30</td>
</tr> 
</table>

CSS

table{
  width:500px;
  height:200px;
  float:left;
  margin-left:5px;
}

table,th,td{
  text-align:center;
} 

th,td{
  background:#ffffffc5;
}
caption{
  font-size:20px;
  color:blue;
}

*{
  text-align:center;
}

JS

text.innerHTML = "Поточний інтервал: 2";
function f() {
  var range = document.getElementById("range").value;
  var element = document.getElementById("table");
  var text = document.getElementById("text");

  element.setAttribute("cellspacing", range);
  text.innerHTML = "Поточний інтервал:" + range;
}
//# sourceURL=pen.js

HTML

<p>1. <code>cellspacing="0"</code> — проміжку немає, лінії подвійні:</p>
<table cellspacing="0" class="sep">
    <tr><th>Місто</th><th>Область</th></tr>
    <tr><td>Львів</td><td>Львівська</td></tr>
    <tr><td>Одеса</td><td>Одеська</td></tr>
</table>

<p>2. <code>cellspacing="10"</code> — старий атрибут:</p>
<table cellspacing="10" class="sep">
    <tr><th>Місто</th><th>Область</th></tr>
    <tr><td>Львів</td><td>Львівська</td></tr>
    <tr><td>Одеса</td><td>Одеська</td></tr>
</table>

<p>3. CSS <code>border-spacing: 12px 4px</code> — окремо по горизонталі й вертикалі:</p>
<table class="spacing">
    <tr><th>Місто</th><th>Область</th></tr>
    <tr><td>Львів</td><td>Львівська</td></tr>
    <tr><td>Одеса</td><td>Одеська</td></tr>
</table>

<p>4. <code>border-collapse: collapse</code> — <code>border-spacing: 12px</code> тут ігнорується:</p>
<table class="collapsed">
    <tr><th>Місто</th><th>Область</th></tr>
    <tr><td>Львів</td><td>Львівська</td></tr>
    <tr><td>Одеса</td><td>Одеська</td></tr>
</table>

CSS

body {
    font-family: system-ui, sans-serif;
    font-size: 15px;
}

p {
    margin: 20px 0 6px;
    color: #555;
    font-size: 14px;
}

table {
    background: #dde8f0;
    font-size: 14px;
}

th,
td {
    border: 2px solid #4a6b86;
    padding: 6px 10px;
    background: #fff;
    text-align: left;
}

.sep,
.spacing {
    border-collapse: separate;
}

.spacing {
    border-spacing: 12px 4px;
}

.collapsed {
    border-collapse: collapse;
    border-spacing: 12px;
}