Всех друзей поздравляем с Новым годом! Всего вам самого наилучшего! Всех благ, здоровья а материальное приложится!
СКРИПТЫ althtmlcssphpjsЕЩЁ

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

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

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

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

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

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

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

    Если используются стили 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 - это уже будет тема отдельная - тема границ ячеек у таблицы. В том числе смотрим ширину столбца - потому что именно они будут влиять на внутренние границы таблицы
  7. С помощью какого свойства таблицы определяются её границы?

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

    Для того,чтобы увидеть границы таблицы присвойте таблице атрибут бордер и вы сразу увидите границы таблицы.

P.S.

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

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

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


Вас может еще заинтересовать список тем : HTML , CSS , TABLE ,
Последняя дата редактирования : 2020-01-20 12:56
Теги:
границы таблицы html как сделать границы таблицы в html таблица html нижняя граница таблицы html задать границы таблицы html стиль границы таблицы html как скрыть границы таблицы в html html тонкие границы таблицы таблицы и границы<table> <tbody> сделать границы черныекак сделать обводку таблицы в htmlhtml таблица границы с помощью какого свойства таблицы определяются её границы?как в таблицу html добавить тонкие границы

НАШИ ПРОЕКТЫ : Проекты находятся в разной степени готовности (просто их столько, что времени не хватает…) Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2020