Как сделать таблицу на форуме

Интернет Форум! = int.5bb.ru =

Меню навигации

Пользовательские ссылки

Объявление

Информация о пользователе

Создаем таблицу на форуме.

Сообщений 1 страница 6 из 6

Поделиться12008-04-10 15:23:38

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

Итак создаем таблицу.

— тег ячейки
— тег строчки

Все параметры записываем исключительно в тег

Теперь попробуем создать простую таблицу которая будет иметь вот такой вид.

Код:

Рас рас

Итак, пишем основной тег
Затем прописываем две строки

А затем прописываем в каждую строку одинаковое количество столбцов
Теперь у нас весь код должен выглядеть вот так.

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

Прописываем в первый наш столбец вот такое bgcolor=»#008000″
И видем что фон в верхней левой ячейке стал зеленым

Давайте во второй выравняем текст по верхнему правому краю align=»right» valign=»top»
Пишем какой либо текст, и он у нас будет выравниватся по правому краю в верху

В следующей давайте изменим ширину ячейки
(ВАЖНО! Если меняете ширину верхней, также стоит изменить параметры и той которая находится под нашей ячейкой). Тоесть пишем в 3 тег верхней строки width=»400″ и тоже самое пишем в 3 тег нижней строки

Теперь попробуем изменить цвет границ ячейки
Выбираем какую нибудь ячейку, которую мы еще не калечели
И пишем туда bordercolor=»#FFFF00″
Теперь граница нашей ячейки перекрасилась в желтый цвет

Итак, код нашей разукрашеной таблицы будет выглядить примерно вот так.

Код:

Рас рас

Ну и последнее.. Можем порабоать над всей таблицей.
ТОесть теперь все будем вставлять только сюда
Поставим картинкой фон для всех ячеек где не указаны параметры фона
Пишем bgcolor=»#FF0000″ и цвет фона всей таблицы поменялся на красный.

И последнее. Если мы хотим совсем убрать границы таблицы то пишем вот такое border=»0″ cellspacing=»0″ cellpadding=»0″

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

Источник

Единый форум поддержки

Меню навигации

Пользовательские ссылки

Информация о пользователе

Создаем таблицу

Сообщений 1 страница 20 из 552

Поделиться1Пн, 7 Май 2007 16:12:57

Теперь попробуем создать простую таблицу которая будет иметь вот такой вид

Итак, пишем основной тег
Затем прописываем две строки

А затем прописываем в каждую строку одинаковое количество столбцов

Итак теперь у нас весь код должен выглядеть вот так

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

Прописываем в первый наш столбец вот такое bgcolor=»#008000″
И видем что фон в верхней левой ячейке стал зеленым

Давайте во второй выравняем текст по верхнему правому краю align=»right» valign=»top»
Пишем какой либо текст, и он у нас будет выравниватся по правому краю в верху

В следующей давайте изменим ширину ячейки (ВАЖНО! Если меняете ширину верхней, также стоит изменить параметры и той которая находится под нашей ячейкой)
Тоесть пишем в 3 тег верхней строки width=»400″ и тоже самое пишем в 3 тег нижней строки

Теперь давайте изменим цвет границ ячейки
Выбираем какую нибудь ячейку, которую мы еще не калечели
И пишем туда bordercolor=»#FFFF00″
Теперь граница нашей ячейки перекрасилась в желтый цвет

Итак, код нашей разукрашеной таблицы будет выглядить примерно вот так

Также можем сделать так, чтоб например в таблице было 2 строки, но в одной из строк была ячейка в которой еще несколько строк или столбцов..

Берем всю туже нашу таблицу
Допустим что в средней ячейке мы хотим сдлеать еще 3 строки, тогда в ячейку которая находится слева и справа от нее пишем rowspan=» 3 «
Где 3 будет количество дополнительных строк
Если хотим чтоб были дополнительные столбцы, тогда в ячейки над ней, и под ней пишем colspan=» 2 «
Где 2 будет количество дополнительных столбцов

Итак теперь код всего этого будет выглядеть вот так

Ну и последнее.. МОжем порабоать над всей таблицей.
ТОесть теперь все будем вставлять только сюда
Поставим картинкой фон для всех ячеек где не указаны параметры фона
Пишем bgcolor=»#FF0000″ и цвет фона всей таблицы поменялся на красный.

И последнее. Если мы хотим совсем убрать границы таблицы то пишем вот такое border=»0″ cellspacing=»0″ cellpadding=»0″

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

Источник

Официальный Форум технической поддержки ForumBB

Меню навигации

Пользовательские ссылки

Объявление

Вопросы по рекламе на ForumBB: sales@forumbb.ru, ICQ: 1-130-134, skype: alex_derenchuk.
По всем остальным вопросам, пишите: admin@forumbb.ru, ICQ: 1-130-134.

Информация о пользователе

Создаем таблицу на форуме

Сообщений 1 страница 20 из 353

Поделиться129.05.2007 15:33:50

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

Теперь попробуем создать простую таблицу которая будет иметь вот такой вид

Код:

Рас рас

Итак, пишем основной тег
Затем прописываем две строки

А затем прописываем в каждую строку одинаковое количество столбцов

Итак теперь у нас весь код должен выглядеть вот так

Код:

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

Прописываем в первый наш столбец вот такое bgcolor=»#008000″
И видем что фон в верхней левой ячейке стал зеленым

Давайте во второй выравняем текст по верхнему правому краю align=»right» valign=»top»
Пишем какой либо текст, и он у нас будет выравниватся по правому краю в верху

В следующей давайте изменим ширину ячейки (ВАЖНО! Если меняете ширину верхней, также стоит изменить параметры и той которая находится под нашей ячейкой)
Тоесть пишем в 3 тег верхней строки width=»400″ и тоже самое пишем в 3 тег нижней строки

Теперь давайте изменим цвет границ ячейки
Выбираем какую нибудь ячейку, которую мы еще не калечели
И пишем туда bordercolor=»#FFFF00″
Теперь граница нашей ячейки перекрасилась в желтый цвет

Итак, код нашей разукрашеной таблицы будет выглядить примерно вот так

Код:

Рас рас

Также можем сделать так, чтоб например в таблице было 2 строки, но в одной из строк была ячейка в которой еще несколько строк или столбцов..

Берем всю туже нашу таблицу
Допустим что в средней ячейке мы хотим сдлеать еще 3 строки, тогда в ячейку которая находится слева и справа от нее пишем rowspan=»3″
Где 3 будет количество дополнительных строк
Если хотим чтоб были дополнительные столбцы, тогда в ячейки над ней, и под ней пишем colspan=»2″
Где 2 будет количество дополнительных столбцов

Итак теперь код всего этого будет выглядеть вот так

Код:

Рас рас

Ну и последнее.. МОжем порабоать над всей таблицей.
ТОесть теперь все будем вставлять только сюда
Поставим картинкой фон для всех ячеек где не указаны параметры фона
Пишем bgcolor=»#FF0000″ и цвет фона всей таблицы поменялся на красный.

И последнее. Если мы хотим совсем убрать границы таблицы то пишем вот такое border=»0″ cellspacing=»0″ cellpadding=»0″

Источник

Меню навигации

Пользовательские ссылки

Объявление

Проект от команды FD

☑ Поиск роли, партнёра, игрока.
☑ Легко. Удобно. Современно.
☑ Мы в процессе разработки.

Загадочный Дом «Кузнечик»

Форумные игры, кино, позитивное отношение и душевное общение!
Есть в мире место, где душе тепло.
Заходи, мы будем тебе рады!

Мийрон

Качественный пиар быстро и недорого.
Красивейшие дизайны по низким ценам.
Каталог ролевых игр.

Чат на отдельной странице на форуме. Без регистрации, используются форумные аккаунты.
Стоимость: 1500р
Первым 10 покупателям скидка 20%.

Дизайн «Warlords of Draenor»

Детализированный rpg-дизайн для MyBB форума гильдии «Warlords of Draenor»
Стоимость при покупке эксклюзивно: 6300р
В стоимость входит настройка и корректировка дизайна под ваш проект.

Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Реклама на сайте • Предложения
Стать модератором • Отзывы

Верстка и скрипты
Все связанное с кодингом: скрипты, верстка html/css, верстка макетов дизайна и т.д.
Шаблон для заказа • Помощь с оформлением заказа

Информация о пользователе

Создаем таблицу

Сообщений 1 страница 7 из 7

Поделиться117.01.11 23:00

Теперь попробуем создать простую таблицу которая будет иметь вот такой вид:

Итак, пишем основной тег
Затем прописываем две строки:

А затем прописываем в каждую строку одинаковое количество столбцов

Итак теперь у нас весь код должен выглядеть вот так:

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

Прописываем в первый наш столбец вот такое bgcolor=»#008000″
И видем что фон в верхней левой ячейке стал зеленым

Давайте во второй выравняем текст по верхнему правому краю align=»right» valign=»top»
Пишем какой либо текст, и он у нас будет выравниватся по правому краю в верху

В следующей давайте изменим ширину ячейки (ВАЖНО! Если меняете ширину верхней, также стоит изменить параметры и той которая находится под нашей ячейкой)
Тоесть пишем в 3 тег верхней строки width=»400″ и тоже самое пишем в 3 тег нижней строки

Теперь давайте изменим цвет границ ячейки
Выбираем какую нибудь ячейку, которую мы еще не калечели
И пишем туда bordercolor=»#FFFF00″
Теперь граница нашей ячейки перекрасилась в желтый цвет

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

Также можем сделать так, чтоб например в таблице было 2 строки, но в одной из строк была ячейка в которой еще несколько строк или столбцов..

Берем всю туже нашу таблицу
Допустим что в средней ячейке мы хотим сдлеать еще 3 строки, тогда в ячейку которая находится слева и справа от нее пишем rowspan=» 3 «
Где 3 будет количество дополнительных строк
Если хотим чтоб были дополнительные столбцы, тогда в ячейки над ней, и под ней пишем colspan=» 2 «
Где 2 будет количество дополнительных столбцов

Итак теперь код всего этого будет выглядеть вот так:

Ну и последнее.. МОжем порабоать над всей таблицей.
ТОесть теперь все будем вставлять только сюда
Поставим картинкой фон для всех ячеек где не указаны параметры фона
Пишем bgcolor=»#FF0000″ и цвет фона всей таблицы поменялся на красный.

И последнее. Если мы хотим совсем убрать границы таблицы то пишем вот такое border=»0″ cellspacing=»0″ cellpadding=»0″

Теги: техническая поддержка, статья, таблицы

Источник

Как сделать таблицу на форуме

HTML-таблицы используются для логического структурирования контента. Они состоят из строк и ячеек которые можно объединять. В этой статье вы найдете подробное руководство по созданию HTML-таблиц с нуля. Материал рассчитан на новичков — школьников и студентов первых курсов. Рассмотрим как создаются таблицы в HTML.

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

Как сделать таблицу в HTML?

Результат выполнения кода будет следующим.

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

В стилях таблиц по умолчанию граница отсутствует. Добавить границы можно с помощью HTML-кода и с помощью CSS.

Устанавливает границу равную 1 пикселю, серого цвета. Равнозначным будет CSS-код:

Цвет границ задается с помощью bordercolor, а размер с помощью border.

Как убрать внутренние границы таблицы?

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

Таблица сотрудников фирмы

ФИО	Должность
Иванов Иван Иванович	Директор
Петрова Любовь Николаевна	Главный бухгалтер

Строка таблицы

Как вы уже догадались строка таблицы задается с помощью тега

(от англ. table row — строка таблицы). Элемент

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

Ячейки таблицы

Ячейки таблицы создаются с помощью тега

(от англ. able data — данные таблицы), который вкладывается в

. Думаю со строками и ячейками все понятно.

Заголовок таблицы

Существует тег для создания заголовка таблицы и тег для создания заголовка столбца.

Для создания заголовка столбца используется тег

(от англ. table head — заголовок таблицы).

Все это немного запутано, правда? Давайте разбираться на примере.

Таблица сотрудников фирмы

ФИО	Должность
Иванов Иван Иванович	Директор
Петрова Любовь Николаевна	Главный бухгалтер

Таблица по центру

Часто возникает необходимость выровнять таблицу по центру документа. Тут есть два варианта (как и с границей).С помощью HTML-кода добавить атрибут align со значением center тега

.

Этот вариант применим если нам нужно выровнять по центру одну таблицу. Если же нам нужно выровнять по центру все таблицы, тогда лучше применить CSS-код.

Размер таблицы

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

При этом можно указать размеры таблицы в пикселях, где width — ширина таблицы, height — высота таблицы. Например, сделаем нашу таблицу шириной 400 пикселей.

ФИО	Должность
Иванов Иван Иванович	Директор
Петрова Любовь Николаевна	Главный бухгалтер

Более удобно задавать размер таблицы в процентах. В таком случае таблица становиться адаптивной. Изменим значение widthн равным 100%. Длинна будет адаптироваться в зависимости от контента. Результат будет следующим.

ФИО	Должность
Иванов Иван Иванович	Директор
Петрова Любовь Николаевна	Главный бухгалтер

Размер шрифта

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

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

Таблица сотрудников фирмы

ФИО	Должность
Иванов Иван Иванович	Директор
Петрова Любовь Николаевна	Главный бухгалтер

Теперь воспользуемся CSS для того что бы изменить шрифт в этой таблице.

Таблица сотрудников фирмы

ФИО	Должность
Иванов Иван Иванович	Директор
Петрова Любовь Николаевна	Главный бухгалтер

Здесь мы указываем что весь текст в таблице должен быть размером 12px, а шрифт — ‘Times New Roman’.

Выравнивание текста

Выровнять текст в таблице можно несколькими способами. Рассмотрим выравнивание с помощью HTML.

Разбираемся на примере заголовком столбцов. Горизонтальное выравнивание осуществляется с помощью атрибута align. Выровняем заголовки столбцов по центру.

Теперь заголовки столбцов (ФИО и Должность) выровнены по центру.

Таблица сотрудников фирмы

ФИО	Должность
Иванов Иван Иванович	Директор
Петрова Любовь Николаевна	Главный бухгалтер

Аналогичное действие можно выполнить с помощью CSS-кода: text-align:center;

Вертикальное выравнивание осуществляется с помощью тега valign который имеет следующие свойства:

Отступы в таблице

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

Отступы от границ ячеек. С помощью HTML задать отступы можно используя атрибут cellpadding тега

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

Таблица сотрудников фирмы

ФИО	Должность
Иванов Иван Иванович	Директор
Петрова Любовь Николаевна	Главный бухгалтер

Видите, текст уже не так прижимается к границе. С помощью CSS сделать это можно следующим образом: td .

Объединение ячеек

Довольно важный момент в HTML-таблицах это объединение ячеек.

Объединение может быть горизонтальным.

Для горизонтального объединения ячеек используется атрибут colspan. Соответственно если у нас 4 ячейки, а мы объединяем две по горизонтали, то в первой строке у нас будет одна ячейка. Разберемся на примере.

Таблица сотрудников фирмы

ФИО	Должность
Руководящий состав:
Иванов Иван Иванович	Директор
Петрова Любовь Николаевна	Главный бухгалтер

Теперь представим ситуацию что на время отпуска главного бухгалтера директор занимает две должности. Для вертикального объединения ячеек будем использовать атрибут rowspan.

Таблица сотрудников фирмы

ФИО	Должность
Иванов Иван Иванович	Директор
	Главный бухгалтер

Оформление HTML-таблиц

Под оформлением таблиц я имею ввиду следующие манипуляции:

Изменение цвета фона таблицы

Изменить цвет фона таблицы с помощью HTML можно с помощью атрибута bgcolor. Давайте сделаем фон нашей таблицы не стандартным.

Таблица сотрудников фирмы

ФИО	Должность
Иванов Иван Иванович	Директор
	Главный бухгалтер

Изменить цвет ячейки (или строк)

Цвет строки или ячейки изменятся с помощью того же атрибута. Для меня удобно менять цвет фона строки в больших таблицах – тогда визуально таблица воспринимается гораздо лучше.

Таблица сотрудников фирмы

ФИО	Должность
Иванов Иван Иванович	Директор
Иванов Иван Иванович	Главный бухгалтер

Картинки в ячейке

Давайте сделаем вот что. Добавим Справа фото сотрудников. Если фотографии сотрудника нет, то мы сделаем полупрозрачное фоновое изображение и напишем, что фото нет.

А затем мы применим CSS-код для оформления ячейки в которой не будет фотографии.

Таблица сотрудников фирмы

ФИО	Должность	Фото
Иванов Иван Иванович	Директор
Иванов Иван Иванович	Главный бухгалтер	Нет фото

Пояснения. В первом случае у нас в ячейку вставляется изображение и ячейка адаптируется под размер картинки.

Во втором случае картинка является фоновым изображением, поэтому я добавил height:200px; — что бы фоновое изображение отобразилось полностью. В этом случае размер ячейки (если не задавать его как это сделал я) зависит не от размера фонового изображения, а от содержимого ячейки (в данном случае — текста).

Кнопки и элементы управления

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

Таблица сотрудников фирмы

ФИО	Должность	Фото	Написать
Иванов Иван Иванович	Директор		Написать директору
Иванов Иван Иванович	Главный бухгалтер	Нет фото	Написать бухгалтеру

Скролл или прокрутка таблицы

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

Таблица сотрудников фирмы

ФИО	Должность	Фото	Написать
Иванов Иван Иванович	Директор		Написать директору
Иванов Иван Иванович	Главный бухгалтер	Нет фото	Написать бухгалтеру

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

Генератор HTML-таблиц

Обучаю HTML, CSS, PHP. Создаю и продвигаю сайты, скрипты и программы. Занимаюсь информационной безопасностью. Рассмотрю различные виды сотрудничества.

Источник