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

HTML

<p>Виберіть потрібне значення для <code>frame</code>:

<select id="form">
   <option value="border" name="value">border</option>
   <option value="box" name="value">box</option>
   <option value="rhs" name="value">rhs</option>
   <option value="lhs" name="value">lhs</option>
   <option value="vsides" name="value">vsides</option>
   <option value="hsides" name="value">hsides</option>
   <option value="below" name="value">below</option>
   <option value="above" name="value">above</option>
   <option value="void" name="value">void</option>
</select>
  </p>
<nav id='text'>Кордон навколо таблиці.</nav>
<hr>



<table id = "table" border="1">
<caption><p>З використанням атрибуту frame</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="1">
<caption><p>Без використанням атрибуту frame</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

var wrapper = document.getElementById('table');
var form = document.getElementById('form');
var text = document.getElementById('text');

var textArray = { 'border': 'Кордон навколо таблиці.',
  'box': 'Кордон навколо таблиці.',
  'rhs': 'Кордон праворуч.',
  'lhs': 'Кордон ліворуч.',
  'vsides': 'Вертикальні кордони (тільки правий кордон та лівий).',
  'hsides': 'Горизонтальні кордони (кордон тільки знизу та зверху).',
  'below': 'Тільки нижній кордон в таблиці.',
  'above': 'Тільки верхній кордон в таблиці.',
  'void': 'Без кордонів навколо таблиці.' };

form.onchange = function () {
  for (var i = 0; i < form.options.length; i++) {if (window.CP.shouldStopExecution(0)) break;
    if (form.options[i].selected == true) {
      wrapper.frame = form.options[i].value;
      text.innerHTML = textArray[form.options[i].value];
    }
  }window.CP.exitedLoop(0);
};
//# sourceURL=pen.js

HTML

<table border="1" frame="box">
    <caption>frame="box" — рамка з усіх чотирьох боків</caption>
    <tr><th>Місто</th><th>2025</th></tr>
    <tr><td>Київ</td><td>143</td></tr>
</table>

<table border="1" frame="hsides">
    <caption>frame="hsides" — тільки верх і низ</caption>
    <tr><th>Місто</th><th>2025</th></tr>
    <tr><td>Київ</td><td>143</td></tr>
</table>

<table border="1" frame="lhs">
    <caption>frame="lhs" — тільки лівий бік</caption>
    <tr><th>Місто</th><th>2025</th></tr>
    <tr><td>Київ</td><td>143</td></tr>
</table>

<table border="1" frame="void">
    <caption>frame="void" — зовнішньої рамки немає зовсім</caption>
    <tr><th>Місто</th><th>2025</th></tr>
    <tr><td>Київ</td><td>143</td></tr>
</table>

<table class="css-frame" frame="void">
    <caption>Тут теж frame="void", але стилі перекривають атрибут</caption>
    <tr><th>Місто</th><th>2025</th></tr>
    <tr><td>Київ</td><td>143</td></tr>
</table>

CSS

table {
    width: 300px;
    margin-bottom: 18px;
}

caption {
    margin-bottom: 6px;
    font-weight: 600;
    text-align: left;
}

td,
th {
    padding: 6px 10px;
    text-align: left;
}

.css-frame {
    border-top: 3px solid #2f6fd0;
    border-bottom: 3px solid #2f6fd0;
    border-left: 3px dotted #c0392b;
    border-right: 3px dotted #c0392b;
}