Границы таблицы html

Границы таблицы html – они бывают разными! Граница может иметь различные свойства, например начертание.

1. Как обозначается граница таблицы!?
2. Видео как сделать границу таблицы
3. Как сделать одинарную границу у таблицы!?
4. Как сделать границу таблицы точками?
5. Сделать границу таблицы пунктирной линией.
6. Скрыть наружную границу таблицы html
7. Границы внутри таблицы html
8. С помощью какого свойства таблицы определяются её границы?
9. Как увидеть границы таблицы!
10. Как убрать двойную границу в таблице html
11. Как сделать жирные границы у таблицы html

Скопировать ссылку



Как обозначается граница таблицы!?

Возьмем для примера совсем простую структуру таблицы 2 строки + 2 столбца.

Для того, чтобы мы смогли увидеть границы таблицы их нужно как-то обозначить!

Граница таблицы обозначается атрибутом "border". У которого должно быть свойство - толщина и цвет.

1. Если используется такая конструкция как в ниже идущей таблице - цвет указывать необязательно -по умолчанию это черный + начертание -по умолчанию линия.
2. Если требуется изменить цвет, то следует добавить свойство цвета.


Если используются стили css, то в них требуется указать и толщину, и начертание - иначе без одного из этих свойств вы границу не увидите...

    <table border="1" width="600">

        <tr>

            <td >Привет</td>

            <td>Привет</td>

        </tr>

        <tr>

            <td>Текст</td>

            <td>Текст</td>

        </tr>

    </table>

Результат:

Что мы здесь можем наблюдать!? Что таблица имеет двойные границы.


Скопировать ссылку



Видео как сделать границу таблицы

Видео сделано еще на старом оборудовании и качество не очень, если смотреть в разрешении 1920×1080, но как говорится, что есть, то есть... дл общего понимания вполне годится!

Друзья!

Мне очень нужны подписчики!
Пожалуйста подпишись на Дзене!
Заранее спасибо!



Скопировать ссылку



Как сделать одинарную границу у таблицы!?

Вообще - такая двойная линия границы смотрится, по-моему мнению очень некрасиво, давайте попытаемся сделать её в одну линию....

Добавляем в таблицу border-collapse:collapse;

2.a. Либо в таблицу записываем атрибуты таким образом:
<table  border="1" width="900" style="border-collapse:collapse;"> 2.b.Либо через стили css:

<style> 

table.example{
border-collapse: collapse;
}
table.example td{
border:1px solid;
}
</style>

В таблице надо прописать класс:

<table width="850" class="example">

Результат будет в двух случаях аналогичный:

Привет	Привет
Текст	Текст

Скопировать ссылку



Как сделать границу таблицы точками?

Для того, чтобы сделать границу таблицы точками вместо solid ставим dotted.

Код:

<table width="500" style="border: 2px 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;

}

Таблица:

<table>
   <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 - это уже будет тема отдельная - тема границ ячеек у таблицы. В том числе смотрим ширину столбца - потому что именно они будут влиять на внутренние границы таблицы

Скопировать ссылку



С помощью какого свойства таблицы определяются её границы?

Границы таблицы определяются свойством ширины width таблицы, какую ширину вы поставите, там и будут границы таблицы!

Скопировать ссылку



Как увидеть границы таблицы!?

Для того,чтобы увидеть границы таблицы присвойте таблице свойство 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 - неважно!

<style>.no_double{border-collapse: collapse;}</style>

В первой таблице, в первой строке прямо в первый тег добавляем данный класс:

<table width="600" style="border: 1px solid" class="no_double">

Со второй таблицей поступаем аналогично:

<table width="600" class="no_double">

Результат:

Привет	Привет
Текст	Текст

Результат:

Привет	Привет
Текст	Текст

Данная страница – граница таблицы – была написана довольно давно, но почему-то она была такой большой и в теме про границы было напихано столько много, что можно было запутаться!

И плюс ко всему было несколько ошибок!

В общем пришлось полностью переработать страницу – практически, что написал заново!

Еще никто не прокомментировал! COMMENTS+   BBcode

Подписаться + =

---