С чем вам помочь?

Задавайте вопрос или опишите проблему, с которой Вы столкнулись

Формирование рамки таблицы

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

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

Например, вот так (рис 1)


Рисунок 1

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


Рисунок 2

Вопрос возникает - как задать для таблицы красивую, ровную рамку? Рассмотрим...

 

Как задать для таблицы ровную рамку

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

1) На нужной странице, где добавлена таблица, переходим в режим "источник"

Рисунок 3

Далее необходимо задать таблице атрибут id. 

Для этого у тега <table> прописываем id следующим образом:

<table id="tb1" width="631"  height="244" >

Атрибуты width="631" и  height="244" - это ширина и высота таблицы в пикселях, вы можете прописать их по своему усмотрению.

2) Далее, выше, перед тегом <table> нужно прописать следующую строчку-стиль:

 <style type="text/css">#tb1 td {border: 1px solid black;padding: 5px; }</style>

Она задает толщину границы и её цвет.

В результате всё должно получится следующим образом:

...
<style type="text/css">#tb1 td {border: 1px solid black;padding: 5px; }</style>
<table id="tb1" width="631" height="244">
...


Рисунок 4

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


Рисунок 5

Рамки и границы таблицы сформированы.

Всё готово.

Открыть онлайн чат? Открыть
Статья оказалась полезной? Да Нет
Как мы можем улучшить статью?
Благодарим за отзыв.
Благодарим за отзыв. Мы улучшим эту статью.
Произошла ошибка.
Не нашли нужную статью? Предложить тему
Не нашли нужную статью?
Благодарим за отзыв.
Произошла ошибка.

Дизайн интернет-магазина

Работа с CSS Как изменить надписи кнопок на сайте Как изменить дизайн сайта Как изменить размер и стиль шрифта на сайте Примеры изменения CSS Как создать и загрузить свою цветовую схему в трансформер дизайна Настройка внешнего вида интернет-магазина Как загрузить свою тему в трансформер дизайна Редактирование блоков и текстов на главной странице Как создать и загрузить свой фон в трансформер дизайна Работа со статическими блоками (видео) Работа со статическими блоками (описание блоков) Вопросы авторского права на дизайн Товары на главной: добавление новинок и хитов Настройка карусели на главной странице интернет-магазина (видео) Настройка карусели на главной странице интернет-магазина Вывод изображения большего размера при нажатии изображение Вывод вплывающего окна с текстом при нажатии на ссылку Как добавить таблицу в текст страницы, описания или новости Установка якоря на странице Формирование рамки таблицы Как изменить размер фотографии (картинок) для всех сущностей в каталоге Как создать и загрузить свою тему в трансформер дизайна (Для версии 4.x и 3.x)
© AdvantShop. Платформа для открытия интернет-магазина.