Полюбите код! И он полюбит Вас!

Последние комментарии:

Марат : Рад, что помог! далее

2018-05-01 14:39:38



Serge : Коротко и ясно!!! Молодца!!! я, даже не поленился, зарегился и далее

2018-05-01 12:36:15



Марат : Андрей - там может быть столько нюансов... А вообще, мы далее

2018-03-11 13:23:36



Андрей : Попробовал поставить версию 1.2, но что-то не работает. далее

2018-03-11 13:03:52



Марат : Для этого и делали! Рад, что помог! Приходите ещё! далее

2018-02-16 20:31:51



Это интересно:

Рейтинги страниц.

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

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

В прошлый раз мы говорили о границе таблицы вообще и о цвете границы в частности.

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

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

1.

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

border = "1"

  1. <table width="500" border = "1">

  2. <tbody>

  3. <tr>

  4. <td>&nbsp;</td>

  5. </tr>

  6. </tbody>

  7. </table>

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

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

 

Давайте тоже самое - только добавим solid

"border:1px solid"

 

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

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

2.

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

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

style="border:3px solid">

Код таблицы:

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

  2. <tbody>

  3. <tr>

  4. <td>&nbsp;</td>

  5. </tr>

  6. </tbody>

  7. </table>

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

 

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

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

3.

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

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

Tolshina-granitsi

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

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

  2. <tbody>

  3. <tr>

  4. <td>&nbsp;</td>

  5. </tr>

  6. </tbody>

  7. </table>

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

<style>

.Tolshina-granitsi {

border:solid 5px;

}

</style>

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

 

4.

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

Нам нужно создать файл css, к примеру:

Tolshina-granitsi-tablitsi.css

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

.Tolshina-granitsi2 {

border:solid 10px;

}

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

<link href="Tolshina-granitsi-tablitsi.css" rel="stylesheet" type="text/css"/>

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

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

  2. <tbody>

  3. <tr>

  4. <td>&nbsp;</td>

  5. </tr>

  6. </tbody>

  7. </table>

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

 

Кипируем нужные коды отсюда.

Понравилась статья!? Не стесняйся – поделись ссылкой!

И!

Пожалуйста! Если вам не трудно - прокомментируйте то, что вы прочитали! Вам понравилось, или не понравилось! Напишите, какие мысли возникли у вас, и это бесплатно для вас, но очень ценно для нас!!! Всё, что вы здесь видите - это написано для вас! Никаким другим образом мы не можем понять вашу реакцию. Может, что-то стоит добавить или наоборот убрать. Либо, что-то стоило изменить...

P.S.

25 октября 2017

Мы запустили подписку на новости по емайлу, как только выходит новая статья, то будет отправлено сообщение на почту, что вышла новая статья!

Почему стоит подписаться на наши новости!?

Расскажу историю, вчера искал ответ на один из вопросов (конечно, я могу и сам написать, но чаще всего, вначале, ищу в интернете, может есть готовое решение…) и было множество вариантов, которые были описаны, но ни одного, с примерами! И мало того, что они предлагают решения, которые непонятно как реализовывать, особенно новичкам, у которых больше вопросов, чем ответов. Так они еще и не работают!

У нас же, на сайте – только рабочие проверенные скрипты! Полностью с описанием и с примерами! И реализовать может человек с нулевыми знаниями!

Мы есть здесь:

Проголосовать за статью!
  С 24 сентября мы запускаем новый скрипт в тестовом режиме (только свои скрипты)
  Вы можете проголосовать за понравившуюся статью.

  Еще никто не проголосовал
    


Просмотров 858

Друзья!

Для того, чтобы вы получили бесплатную информацию, мы потратили и время и деньги!

Мы существуем от кликов по рекламе!

Если вы не нашли подходящего блока объявлений, то вы еще можете помочь проекту!

Не стесняйтесь!

Даже самая маленькая сумма будет употреблена на продвижение и улучшение проекта!

Заранее благодарим Вас!

Оставить комментарий:

Для отображения аватара после отправки сообщения, необходимо быть зарегистрированным в Граватаре.



Комментарии

Комментариев пока нет.

* Обязательные поля
(Не публикуется)
 
Жирный Курсив Подчеркнутый Перечеркнутый Степень Индекс Код PHP Код Кавычки Вставить линию Вставить маркированный список Вставить нумерованный список Вставить ссылку Вставить e-mail Вставить изображение Вставить видео
 
Улыбка Печаль Удивление Смех Злость Язык Возмущение Ухмылка Подмигнуть Испуг Круто Скука Смущение Несерьёзно Шокирован
 
5000
Напишите слово грот наоборот.
 
(введите ответ)
 
Уведомлять о новых коментариях по почте.
 

Оставить комментарии через вконтакте

Все дела сделаны!

Теперь можно и поиграть!

Понравилась игра!? Растфнуть на весь экран

Улучши поведенческий фактор на своём сайте.

Забери код здесь

Пишем полную инструкцию о пользовании ruweb.net + DirectAdmin

RuWeb.net - гибкий хостинг
Индекс цитирования