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

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

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

2018-02-16 20:31:51



Виктор : Спасибо! Очень полезная статья. Нужно было очистить всю базу данных, далее

2018-02-16 20:30:13



Евгений : Спасибо за перевод sublime!!!! далее

2018-02-15 16:42:05



Марат : Вообще, после написания статьи - у них вышло обновление, может далее

2018-02-13 19:19:01



Сергей : Доброе время суток!После правки кода, капчи вообще нет! Ни старой, далее

2018-02-13 19:10:15



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

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

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

Поговорим о границе таблицы. Как обозначить границу таблицы, как сделать границу таблицы невидимой, задать границу таблицы через css на самой странице и через css в отдельном файле.

В самом начале, когда я только начал писать о границе таблиц, то думал, что все напишу на одной странице, но она разрослась до таких размеров, что реально переварить всё написанное стало несколько затруднительно! Ну. По крайней мере, я так подумал!

Поэтому, про толщину границы и цвет границы сделал на отдельных страницах.

Начнем с инструмента. Мы будем делать все манипуляции в программе Dreamweaver, но это не означает, что вы не сможете использовать данный материал. "Код" - он как говорится и в Африке "код"!

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

Начнём собственно с того:

Как сделать границу у таблицы в Dreamweaver.

Не перестаю восхищаться и восхвалять программу Dreamweaver, как же всё манипуляции делать легко и просто!

Мы уже говорили про то, как делатьь таблицу в Dreamweaver.

Теперь.

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

На скрине вы можете видеть, что третья строчка и есть толщина границы. Ставим единицу и ширину поставим 500 px.

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

Вот, что у нас получилось:

 

Код:

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

  2. <tbody>

  3. <tr>

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

  5. </tr>

  6. </tbody>

  7. </table>

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

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

Для этого существует совйство "solid".

Мы возьмем верхний код и добавим его к таблице.

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

 

Код:

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

  2. <tbody>

  3. <tr>

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

  5. </tr>

  6. </tbody>

  7. </table>

Если говорить, опять же, как это делать в программе Dreamweaver, то вам нужно знать, что добавлять. А именно, вы ставите курсор на то место таблицы, в котором вы хотите сделать границу, и нажимаете пробел.

И в английской раскладке нажимаем st –далее программа сама найдет - style и добавить -

style="",

далее ставим курсор внутрь кавычек и опять нажимаем пробел, далее нам нужен бордюр – border и опять нажимаем ентер и получится

border:

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

далее нам нужен бордюр – border и опять нажимаем ентер и получится border:

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

И так далее…

Нам нужно получить такую строчку :

style="border: 2px solid"

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

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

Смотрим:

 

Код:

  1. <table width="500" style="border: 2px dotted">
  2. <tbody>
  3. <tr>
  4. <td>&nbsp;</td>
  5. </tr>
  6. </tbody>
  7. </table>

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

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

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

Смотрим:

 

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

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

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

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

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

1.

Для этого таблице нужно присвоить класс, либо ид. Мне больше нравится использовать классы, поэтому и здесь не буду делать исключение, обзовем наш класс granitsa…

Вот, что у на должно получиться:

  1. <table width="500" class="granitsa">

  2. <tbody>

  3. <tr>

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

  5. </tr>

  6. </tbody>

  7. </table>

Далее идем в верх страницы и в том месте, где у вас находятся мета теги пишем свойства стиля. И записываем в стилях, почти тоже самое, что мы писали сверху страницы…

<style>

.granitsa {

border:solid 1px;

}

</style>

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

 

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

2.

Я не буду создавать отдельную страницу для иллюстрации работы данного файла css, а сделаю прямо здесь.

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

Вот наш файл css:

http://dwweb.ru/Site/Tablitsa/Granitsa-tablitsi.css

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

.granitsa2 {

border:1px dashed ;

}

На странице пишем строчку прикрепления файла css, чтобы отличаться от первого варианта стиль сделаем:

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

Вид таблицы:

  1. <table width="500" class="granitsa2">

  2. <tbody>

  3. <tr>

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

  5. </tr>

  6. </tbody>

  7. </table>

Смотрим:

 

Копируем коды здесь.

P.S.

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

Представьте, что у вас табличный дизайн сайта. И на каждой странице вам придется писать эти классы, ладно если это 1,2,3 ну 10 страниц, а если таких страниц 5000? И вам завтра нужно, например, изменит на всех страницах вид границы таблицы – представить объём работы просто невозможно!

А если это свойство прописано в файле css, то вам достаточно изменить лишь одно значение в одном файле!

Вот и всё, что сегодня я вам хотел сказать!

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

И!

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

P.S.

25 октября 2017

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

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

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

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

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

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

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


Просмотров 1684

Друзья!

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

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

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

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

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

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

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

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



Комментарии

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

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

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

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

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

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

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

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

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

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