DWWEB.RU
СКРИПТЫ

Толщина границы таблицы html css

Сегодня коснемся такой темы, как толщина границы таблицы. Как толщину границы установить, изменить, настроить и т.д.

Мы уже писали немного о границе таблицы

И естественно, что толщину границы таблицы можно сделать несколькими способами – в самой таблице, через css внутри таблицы и через css прописав в отдельном файле.

Скопировать коды можно будет внизу страницы.

1.

Возьмем простую таблицу шириной 500 пикселей и добавим туда бордюр.

border = "1"

Код таблицы с границе таблицы по усолчанию:

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

        <tr>

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

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

        </tr>

        <tr>

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

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

        </tr>

    </table>

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

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

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

Давайте изменим написание толщины бордюра через "style" - только добавим solid(начертание линии - сплошная.)

"border:1px solid"

Результат:

 

Здесь обращаю ваше внимание, что разрешение в данном варианте можно не ставить, браузер понимает о чем идет речь.

+ к этому, здесь мы видим, что в таком варианте, граница получается у нас, как бы двойная…

2.

Второй вариант установки толщины границы таблицы чуть посложнее, но у него есть больше возможностей в плане декорирования собственно этой границы…

Добавляем в таблицу такую запись:

style="border:3px solid">

Код таблицы:

<table width="500" style="border:3px solid">

<tbody>

<tr>

<td>&nbsp;</td>

</tr>

</tbody>

</table>

Смотрим на нашу границу таблицы в 3 пикселя:

 

Как задать ширину границы таблицы через css.

Через css можно устанавливать толщину границы таблицы двумя способами:

3.

К таблице нам нужно прикрутить класс или ид, а в начале страницы, в титлах прописать свойства этого класса.

Нам нужно обозвать, как-то нуш класс, ну к примеру:

Tolshina-granitsi

Далее нам нужно данный класс добавить в таблицу:

<table width="500" class="Tolshina-granitsi">

<tbody>

<tr>

<td>&nbsp;</td>

</tr>

</tbody>

</table>

Ну и далее пишем наш стиль с классом и указываем границу таблицы 5 пикселей.

<style>

.Tolshina-granitsi {

border:solid 5px;

}

</style>

Смотрим, что у нас получилось.

 
4. 3 вариант отличается от 4 тем, что мы создадим файл css, потом прикрепим его к данной странице, и в нем пропишем толщину границы таблицы.

Изменим класс и толщину границы таблицы, чтобы всё, у нас отличалось от варианта №3 и занесем в наш файл стилей.

.Tolshina-granitsi2 {

border:solid 10px;

}

Изменим в коде таблицы класс:

<table width="500" class="Tolshina-granitsi2">

<tbody>

<tr>

<td>&nbsp;</td>

</tr>

</tbody>

</table>

Смотрим, что у нас получилось:

 
Не забудь !
Оставить комментарийCOMMENTS+
Сообщений пока нет - Вы можете стать первым
BBcode
нажмите, чтобы загрузить аватар
Загрузить свой аватар(max ширина, высота = 100px) ( как это работает)

Закрыть
+ =
Подписаться
Теги:
толщина границы таблицы htmlтолщина границы cssтолщина границы html

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