Границы таблицы html – они бывают разными! Граница может иметь различные свойства, например начертание.
Мы уже в прошлый раз касались немного темы таблиц, сегодня поговорим немного о границах таблицы...
- Как обозначается граница таблицы!?
- Видео как сделать границу таблицы
- Как сделать одинарную границу у таблицы!?
- Как сделать границу таблицы точками?
- Сделать границу таблицы пунктирной линией.
- Скрыть наружную границу таблицы html
- Границы внутри таблицы html
- С помощью какого свойства таблицы определяются её границы?
- Как увидеть границы таблицы!
- Как убрать двойную границу в таблице html
- Как сделать жирные границы у таблицы html
Как обозначается граница таблицы!?
Возьмем для примера совсем простую структуру таблицы 2 строки + 2 столбца.
Для того, чтобы мы смогли увидеть границы таблицы их нужно как-то обозначить!
Граница таблицы обозначается атрибутом "border". У которого должно быть свойство - толщина и цвет.
Если используются стили css, то в них требуется указать и толщину, и начертание - иначе без одного из этих свойств вы границу не увидите...
<table border="1" width="600">
<tr>
<td >Привет</td>
<td>Привет</td>
</tr>
<tr>
<td>Текст</td>
<td>Текст</td>
</tr>
</table>
Результат:
Что мы здесь можем наблюдать!? Что таблица имеет двойные границы.
Видео как сделать границу таблицы
Видео сделано еще на старом оборудовании и качество не очень, если смотреть в разрешении 1920×1080, но как говорится, что есть, то есть... дл общего понимания вполне годится!
Как сделать одинарную границу у таблицы!?
Вообще - такая двойная линия границы смотрится, по-моему мнению очень некрасиво, давайте попытаемся сделать её в одну линию....
Добавляем в таблицу border-collapse:collapse;
table.example{
border-collapse: collapse;
}
table.example td{
border:1px solid;
}
</style>В таблице надо прописать класс:
Результат будет в двух случаях аналогичный:
| Привет | Привет |
| Текст | Текст |
Как сделать границу таблицы точками?
Для того, чтобы сделать границу таблицы точками вместо solid ставим dotted.
Код:
<tbody>
<tr>
<td> </td>
</tr>
</tbody>
</table>Результат:
Сделать границу таблицы пунктирной линией.
Далее я не буду показывать код, наверное понятно, как это работает, мы приведем ещё несколько вариантов границ таблиц.
Для того, чтобы сделать границу таблицы пунктирной линией заменяем solid на dashed
Результат:
Есть еще несколько разновидностей отображения границ таблиц, но думаю, что и такого описания будет достаточно, ну а если не достаточно, то вам поможет поиск.
Скрыть наружную границу таблицы html
Ну и напоследок... бывает такая ситуация, что требуется скрыть наружные границы таблицы - как это сделать!?
Стили:
table {
width: 500px;
border-collapse: collapse;
border: 2px solid white;
}
td {
padding: 3px;
border: 1px solid ;
text-align: left;
}
Таблица:
<tr>
<td>страна\год</td><td>2016</td><td>2017</td><td>2018</td>
</tr>
<tr>
<td>Россия</td><td>43</td><td>51</td><td>79</td>
</tr>
<tr>
<td>Сша</td><td>28</td><td>34</td><td>48</td>
</tr>
<tr>
<td>Германия</td><td>29</td><td>57</td><td>36</td>
</tr>
</table>
Результат:
| страна\год | 2016 | 2017 | 2018 |
| Россия | 43 | 51 | 79 |
| Сша | 28 | 34 | 48 |
| Германия | 29 | 57 | 36 |
Границы внутри таблицы html
границы внутри таблицы html - это уже будет тема отдельная - тема границ ячеек у таблицы. В том числе смотрим ширину столбца - потому что именно они будут влиять на внутренние границы таблицы
С помощью какого свойства таблицы определяются её границы?
Границы таблицы определяются свойством ширины
Как увидеть границы таблицы!?
Для того,чтобы увидеть границы таблицы присвойте таблице свойство border, либо атрибут border и вы сразу увидите границы таблицы.
Как убрать двойную границу в таблице html
Для того, чтобы убрать двойную границу таблицы html, нам понадобятся тестовые таблицы с двойными границами, мы их возьмем из выше приведенного материала, в первых двух пунктах приведем таблицы, а в третьем пункте удалим эти самые двойные границы таблицы!
1). Двойная граница таблицы с border="1"
Здесь - пример обычной, простой таблицы с двойными границами:
<table border="1" width="600">
<tr>
<td>Привет</td>
<td>Привет</td>
</tr>
<tr>
<td>Текст</td>
<td>Текст</td>
</tr>
</table>
Результат:
| Привет | Привет |
| Текст | Текст |
2). Двойная граница таблицы в стилях
Если мы поставим style="border: 1px solid", то получим также двойные границы таблицы!
<table width="600">
<tr>
<td>Привет</td>
<td>Привет</td>
</tr>
<tr>
<td>Текст</td>
<td>Текст</td>
</tr>
</table>
Еще нам понадобятся стили css, чтобы эту двойную границу сделать...
<style>
table.example_double_border {border: 1px solid;}
table.example_double_border td {border: 1px solid;}
</style>
Результат:
| Привет | Привет |
| Текст | Текст |
3). Удаляем двойные границы таблицы
Теперь у нас есть таблицы с двойными границами, и чтобы избавиться от этих двойных границ. нам нужно... добавить какой-то class, id - неважно!
В первой таблице, в первой строке прямо в первый тег добавляем данный класс:
Со второй таблицей поступаем аналогично:
Результат:
| Привет | Привет |
| Текст | Текст |
Результат:
| Привет | Привет |
| Текст | Текст |
Данная страница – граница таблицы – была написана довольно давно, но почему-то она была такой большой и в теме про границы было напихано столько много, что можно было запутаться!
И плюс ко всему было несколько ошибок!
В общем пришлось полностью переработать страницу – практически, что написал заново!
