СКРИПТЫ alt phpjshtmlcssblog
ТЕГИ:
php (267)
js (136)
html (133)
css (96)
html tags (58)
edit text (37)
jquery (36)
form html (29)
php array (28)
foto (23)
fonts (22)
forum (19)
atom (17)
board (17)
hosting (17)
html book (17)
Показать еще :
svg (16)
js method (16)
php file (15)
ruweb.net (15)
color (14)
osclass (13)
htaccess (13)
path (12)
table (12)
input (11)
icon (11)
info (11)
online (11)
yandex (11)
php date (11)
notepad (11)
js delete (11)
php img (10)
url (10)
jsphp (10)
form (8)
task (7)
cookie (7)
comment (7)
php url (7)
click (6)
ftp (6)
js url (6)
value (5)
reg.ru (5)
mb (5)
adminka (5)
js id (4)
bbcode (4)
js form (4)
select (4)
search (4)
js copy (4)
vk (3)
captcha (3)
js time (3)
iframe (3)
vs code (3)
sitemap (2)
js post (2)
browser (2)
console (2)
seo (2)
tag hr (2)
ukoz (2)
header (1)
archive (1)
smile (1)
numbers (1)
ssl (1)
books (1)

Границы таблицы 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. Как увидеть границы таблицы!?

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


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

Сообщение системы комментирования :

01.09.2021

Форма пока доступна только админу... скоро все заработает...надеюсь...

Счетчик в график :

Построение гравиков
Основа для графика : счетчик посещаемости.
Последние комментарии :
Марат :
10.10.2021 17:20
Добавлен новый смайл
подробнее.
Марат :
05.10.2021 26:37
Страница sitemap.html восстановлена. Но будут вводиться только страницы…
подробнее.
Марат :
04.10.2021 38:22
Добавил несколько вариантов поставить смайл на страницу своего сайта! 3 варианта! Кроме варианта скачать…
подробнее.
Марат :
17.09.2021 28:02
Установка Яндекс поиск на сайт! Контент обновлен на 100%. Такое ощущение, что старый текст не я…
подробнее.
Марат :
07.09.2021 23:21
Частенько приходится исправлять ошибки и вот...как-то я обратил внимание на надпись: "нажми ctrl enter" на сайте и…
подробнее.
Марат :
23/07/2021 10:58
Сам офигеваю...
подробнее.