Атрибут border тега <table> — рамка таблиці
Атрибут border встановлює рамку навколо таблиці. Розмір рамки визначається будь яким цілим чилом.
- Якщо Ви встановите товщину 0 - рамка відсутня на таблиці і клітинках.
- Якщо Ви встановите товщину 1 - рамка рівна 1px на таблиці і клітинках.
- Якщо Ви встановите товщину блільше 1 - рамка таблиці рівна числу яке ви задали, а клітинки 1px.
Без задання рамка зображується тривимірною, але якщо використовується атрибут bordercolor HTML елемента <table>, то вид рамки змінюється в залежності від браузера.
Загальний опис
автор: NagarD
- Порада
-
Даний атрибут застарів, рекомендуємо встановлювати рамку за допомогою CSS стилю -
автор: с3сborder - Нотатка
-
В HTML5 головне значення цього атрибута не товщина рамки навколо таблиці, а саме визначення для чого використовується таблиця
автор: с3с - Нотатка
-
Коли в
автор: с3с<table>використовується атрибутborderбез значень[<table border>], то браузер відображає кордони товщиною один піксель.
Синтаксис
<table border="number">...</table>Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | ≤12.1 | 12 | ≤11 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
Найпростіший приклад використання HTML атрибута border теґа <table>
HTML
<p>У цьому прикладі, Ви можете змінювати значення для властивості border в межах від 0 до 100 переміщаючи повзунок.</p>
<p id="text">hmghk</p>
<input type="range" min="0" max="100" step="1" value="0" id="range" onmousemove="f()">
<hr>
<table id = "table" >
<caption><p>З використанням атрибуту border</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>
<caption><p>Без використанням атрибуту border</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;
padding:10px;
}
caption{
font-size:20px;
color:blue;
}
*{
text-align:center;
}JS
text.innerHTML = "Поточна товщина рамки: 0";
function f() {
var range = document.getElementById("range").value;
var element = document.getElementById("table");
var text = document.getElementById("text");
element.setAttribute("border", range);
text.innerHTML = "Поточна товщина рамки:" + range;
}
//# sourceURL=pen.jsЛіворуч рамка від атрибута border="1" — подвійні об'ємні лінії. Праворуч те саме в CSS із border-collapse: collapse — одна лінія.
HTML
<table border="1">
<caption>border="1"</caption>
<tr><th>Товар</th><th>Ціна</th></tr>
<tr><td>Кава</td><td>85 грн</td></tr>
<tr><td>Чай</td><td>60 грн</td></tr>
</table>
<table class="grid">
<caption>CSS + border-collapse</caption>
<tr><th>Товар</th><th>Ціна</th></tr>
<tr><td>Кава</td><td>85 грн</td></tr>
<tr><td>Чай</td><td>60 грн</td></tr>
</table>CSS
table {
display: inline-table;
margin: 0 20px 12px 0;
font: 15px/1.4 system-ui, sans-serif;
}
caption {
padding: 6px 0;
font-size: 13px;
color: #475569;
}
th, td {
padding: 6px 12px;
}
.grid {
border-collapse: collapse;
}
.grid th,
.grid td {
border: 1px solid #64748b;
}Різниця між HTML 4.01 та HTML5
В HTML 5.x - не підтримується.
Коментарі
Коментарів ще немає — будьте першим!