ГЛАВНАЯ | HTML | CSS | PHP | JS | ЕЩЁ |

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

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

Мы уже в прошлый раз касались немного темы таблиц, сегодня поговорим немного о границах таблицы...
1.

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

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

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

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

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

Если требуется изменить цвет, то следует добавить свойство цвета.

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

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

        <tr>

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

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

        </tr>

        <tr>

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

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

        </tr>

    </table>

Результат:

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

Пример таблицы по умолчанию. 2.

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

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

Добавляем в таблицу 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">

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

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

3.

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

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

Код:

<table width="500" style="border: 2px dotted">

  <tbody>

    <tr>

      <td> </td>

    </tr>

  </tbody>

</table>

Результат:

 
4.

Далее я не буду показывать код, наверное понятно, как это работает, мы приведем ещё несколько вариантов границ таблиц.

Сделать границу таблицы пунктирной линией.

Для того, чтобы сделать границу таблицы пунктирной линией заменяем solid на dashed

Результат:

 

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

5.

Ну и напоследок... бывает такая ситуация, что требуется скрыть наружные границы таблицы - как это сдлеать!?

Скрыть наружную границу таблицы 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>

Результат:

страна\год201620172018
Россия435179
Сша283448
Германия295736

6.

границы внутри таблицы html

границы внутри таблицы html - это уже будет тема отдельная - тема границ ячеек у таблицы.

P.S.

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

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

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

С вашими куками, что-то не то..., попробуете перезагрузить страницу..
Теги:
границы таблицы html как сделать границы таблицы в html таблица html нижняя граница таблицы html задать границы таблицы html стиль границы таблицы html как скрыть границы таблицы в html html тонкие границы таблицы таблицы и границы

НАШИ ПРОЕКТЫ : Проекты находятся в разной степени готовности (просто их столько, что времени не хватает…) https://dwweb.ru/ http://calc.dwweb.ru/ http://kod.dwweb.ru/ http://marrex.ru/ http://pro.dwweb.ru/ https://f0rlink.com/ https://comments.dwweb.ru youtube Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2019