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

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

Поддержи проект!!!

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

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

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

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

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

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

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

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

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

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

    Код:

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

      <tbody>

        <tr>

          <td> </td>

        </tr>

      </tbody>

    </table>

    Результат:

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

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

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

    Результат:

     

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

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

    границы внутри таблицы html - это уже будет тема отдельная - тема границ ячеек у таблицы. В том числе смотрим ширину столбца - потому что именно они будут влиять на внутренние границы таблицы
  8. С помощью какого свойства таблицы определяются её границы?

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

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

  10. Как убрать двойную границу в таблице 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">

    Результат:

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

    Результат:

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

P.S.

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

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

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


Вас может еще заинтересовать список тем : #HTML | #CSS | #TABLE |
Последняя дата редактирования : 2020-04-01 02:10
//dwweb.ru/comments_1_5/include/img/hand_no_foto.png
no
no
Еще никто не прокомментировал! COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

Подписаться + =
Теги:
границы таблицы html как сделать границы таблицы в html таблица html нижняя граница таблицы html задать границы таблицы html стиль границы таблицы html как скрыть границы таблицы в html html тонкие границы таблицы таблицы и границы<table> <tbody> сделать границы черныекак сделать обводку таблицы в htmlhtml таблица границы с помощью какого свойства таблицы определяются её границы?как в таблицу html добавить тонкие границы

Последние комментарии :
Марат :
23/10/2020 01:15
Посмотрел... количество возможных знаков 3... почему у вас не получилось увидеть 2...…
подробнее.
Марат :
23/10/2020 01:05
Да! Тоже исправим...А с ссылкой... вроде бы исправлял... совсем недавно...сейчас проверю в чем там…
подробнее.
Марат :
23/10/2020 01:03
Спасибо за внимательность!1). Исправлено!2). Что-то я сразу не понял, о каком подтверждении идет речь!?О любых…
подробнее.
Станислав :
23/10/2020 08:04
В Ранее отправленном комментарии о скрипте № 85.1 пункт 2 уже выяснен:Скорее всего комментарий не будет…
подробнее.
Станислав :
23/10/2020 07:39
1.Скрипт № 85.1имеется описка в слове: Ссылка на скачив-е-ние:2. Можно ли предусмотреть, чтобы после отправки…
подробнее.