В языке разметки HTML таблицы используются не только для представления каких-либо данных в виде строк и столбцов, но и как средство форматирования страниц и задания расположения различных элементов.
Другими словами, в HTML оформление таблицы может быть вовсе не заметным, однако выполнять функцию каркаса, занимая всю веб-страницу.
Можно поместить, например, в её левый столбец меню, основную информацию в средний, а контактные данные — в правый.
Итак, как сделать таблицу в HTML?
Создадим простейшую таблицу, содержащую три ячейки одной строки с помощью приведенного ниже кода:
В окне браузера только что созданная таблица выглядит следующим образом:
Границы и рамки
По умолчанию в таблице нет границы. Добавить её можно с помощью атрибута border тега
. Однако, иногда браузеры такую границу отображают по-разному, поэтому лучше данный процесс возложить на работу со стилями:
Цвет фона и текста
Для того чтобы указать фон ячейки таблицы HTML, строки или отдельной ячейки, к тегам
,
и
можно применить следующие параметры:
Отступы таблицы в HTML
В HTML отступы в таблице задаются с помощью тега
:
Визуальное отображение данного кода в браузере таково:
Выравнивание таблицы в HTML
Вы можете для каждой отдельной ячейки или строки задать два параметра, которые выполняют горизонтальное ( align ) и вертикальное ( valign ) выравнивание текста в таблице HTML.
Параметр align может иметь следующие значения:
Параметр valign может иметь такие значения:
Вставка изображения в HTML таблицу
У вебмастеров часто возникает вопрос о том, как вставить картинку в HTML таблицу? Для того чтобы это осуществить, необходимо прописать адрес или имя изображения в соответствующей ячейке после тега
.
Объединение ячеек в HTML таблице
Соседствующие ячейки внутри одного столбца или строки можно объединить с помощью параметров rowspan и colspan тега
.
Объединение столбцов одной строчки выглядит так:
Генераторы HTML таблиц
Разумеется, создавать HTML таблицы можно самостоятельно, прописывая вручную все теги HTML. Таблица в данном случае рискует быть составленной некорректно, поскольку человеческий фактор при работе с большими объёмами информации даёт о себе знать.
Уже давно существуют специальные генераторы таблиц HTML, которые призваны сэкономить ваше время. С их помощью вы можете легко создать таблицу с множеством настроек.
Это — отличный вариант для генерации простейших таблиц, однако для более серьёзных целей рекомендуем воспользоваться другими сервисами:
Этот же сервис имеет довольно удобный HTML редактор, в котором можно построить, заполнить таблицу, а затем получить её код:
Если вы решили воспользоваться услугами генератора таблиц, стоит внимательно подойти к выбору подходящего вам сервиса, опробовав самые популярные из них и выбрав наилучший.
Я не могу установить строку таблицы как ссылку на что-то. Я могу использовать только css и html. Я пробовал разные вещи от div в строке к чему-то другому, но все равно не могу заставить его работать.
14 ответов
У вас есть два способа сделать это:
Я сделал вторую работу, используя:
Чтобы избавиться от мертвого пространства между столбцами:
Я бы рекомендовал использовать «display: inline-block» вместо block. С помощью отображения блоков я обнаружил, что Chrome игнорирует «height: 100%» и фактически не делает всю высоту
доступной для щелчка, если в той же строке есть другие элементы, которые имеют большую высоту. Устранение этой проблемы с помощью встроенного блока, а также, возможно, связанной с этим проблемы с обрезкой текста внутри элементов таблицы.
Я создал пользовательскую функцию jquery:
JQuery
Легко и идеально для меня. Надеюсь, это поможет вам.
(Я знаю, что OP хочет только CSS и HTML, но рассмотрим jQuery)
Изменить
Согласовано с Мэттом Кантором, используя данные attr. Отредактированный ответ выше
Если вы используете браузер, который поддерживает его, вы можете использовать CSS для преобразования в строку таблицы:
Если вы не можете использовать JavaScript, вы должны использовать трюк:
Добавьте одну и ту же ссылку к каждой TD той же строки (ссылка должна быть самым внешним элементом в ячейке).
Поверните ссылки на элементы блока: a
Последний заставит ссылку заполнить всю ячейку, поэтому щелчок в любом месте вызовет ссылку.
Если вам нужно использовать таблицу, вы можете поместить ссылку в каждую ячейку таблицы:
И заставьте ссылки заполнить все ячейки:
Если вы можете использовать
Вот CSS, который идет с методом
И добавьте его в таблицу следующим образом:
Ответ от sirwilliam лучше всего подходит мне. Я улучшил Javascript с поддержкой горячей клавиши Ctrl + LeftClick (открывается страница на новой вкладке). Событие ctrlKey используется ПК, metaKey для Mac.
Javascript
Пример
Javascript. Вы можете добавить это, например, в стандартный файл javascript.
HTML Теперь вы можете использовать это для любого элемента
внутри вашего HTML
Когда я хочу имитировать ссылку со ссылкой, но соблюдая стандарты html, я делаю это.
Таким образом, когда кто-то идет с помощью мыши на TR, вся строка (и эта ссылка) получает стиль наведения, и он не видит, что существует несколько ссылок.
Надежда может помочь кому-то.
У меня есть другой путь. Особенно, если вам нужно отправить данные с помощью jQuery
Установите переменную, задающую переменные в SESSIONS, на которых вы будете читать и действовать. страница
Мне бы очень хотелось, чтобы вы отправлялись прямо в окно, но я не думаю, что это возможно.
После прочтения этой темы и некоторых других я придумал следующее решение в javascript:
Чтобы использовать его, поставьте href в tr/td/th, который вы хотите кликать, например:
. И убедитесь, что script выше выполняется после создания элемента tr (путем размещения или использования обработчиков событий).
Вы можете специально указать ссылку TRs с помощью «tr [href]» селектора CSS.
Возможности или некоторые параметры, описанные в этом разделе справки, применимы только в том случае, если в языковых параметрах Microsoft Office включена поддержка английского (США), французского (Канада) или голландского языка.
Сведения о таблицах ссылок
В таблице ссылок перечислены ссылки в юридическом документе, а также номера страниц, на которых отображаются ссылки. Чтобы создать таблицу ссылок, вы можете пометить ссылки и Microsoft Word, чтобы в документе была вставлена особая таблица TA (элемент таблицы ссылок) поле. После этого вы сможете найти в документе следующую длинную или короткую ссылку, чтобы пометить ее или автоматически пометить каждый из последующих вхождений ссылки. Если вы не хотите использовать существующие категории, например судебные или законодательные ссылки, вы можете изменить или добавить категории ссылок.
При создании таблицы ссылок Word находит помеченные ссылки, классифицирует их по категориям и снабжает соответствующими номерами страниц, после чего полученная таблица отображается в документе. Например, с помощью поля
<TA \l «Baldwin v. Alberti, 58 Wn. 2d 243 (1961)» \s «Baldwin v. Alberti» \c 1 \b >
создается следующий элемент в категории «Судебные решения» таблицы ссылок:
Baldwin v. Alberti, 58 Wn. 2d 243 (1961) 5,6
Пометка ссылок
Выделите первую ссылку в документе.
Например, выделите «Forrester v. Craddock, 51 Wn. 2d 315 (1957)».
Нажмите клавиши ALT+SHIFT+I.
Примечание: Можно также открыть вкладку Ссылки и в группе Таблица ссылок нажать кнопку Пометить ссылку.
В поле Выделенный текст измените полную форму ссылки, которую она должна иметь в таблице.
Примечание: Если вы хотите отформатировать текст, щелкните правой кнопкой мыши текст в выделенной надписи и выберите команду Шрифт. Выберите параметры форматирования, которые вы хотите использовать.
В поле Категория выберите категорию, к которой относится ссылка.
В поле Краткая форма введите ссылку в краткой форме, которую приложение Word должно искать в документе.
Например, введите «Forrester v. Craddock».
Чтобы пометить одну ссылку, нажмите кнопку Пометить. Чтобы пометить все полные и краткие ссылки, соответствующие отображаемым в диалоговом окне Определение элемента таблицы ссылок, нажмите кнопку Пометить все.
Чтобы найти следующую ссылку в документе, нажмите кнопку Следующий.
Чтобы пометить ссылки, добавленные в документ позже, выделите исходную ссылку, нажмите клавиши ALT+SHIFT+I, а затем — кнопку Пометить все.
Создание таблицы ссылок
Щелкните то место документа, куда вы хотите вставить таблицу ссылок.
Чтобы обеспечить правильное разбиение документа на страницы, необходимо скрыть коды полей и скрытый текст. Если отображаются поля TA (элемент таблицы ссылок), на вкладке Главная в группе абзац нажмите кнопку Показать или скрыть .
На вкладке Ссылки в группе Таблица ссылок нажмите кнопку Таблица ссылок.
В поле Категория щелкните категорию, которую вы хотите включить в таблицу ссылок. Чтобы включить все категории, выберите вариант Все.
Выполните одно из указанных ниже действий.
Чтобы воспользоваться одним из готовых вариантов, выберите его в поле Форматы.
Чтобы использовать собственный макет таблицы ссылок, задайте нужные параметры.
Совет: Чтобы более точно настроить таблицу ссылок, можно использовать поля. Например, вы можете создать таблицу только для части документа.
Выберите все прочие необходимые параметры таблицы.
При добавлении, удалении, перемещении или изменении ссылок или другого текста документа следует обновить таблицу ссылок. Например, при изменении ссылки или перемещении ее на другую страницу следует убедиться, что в таблицу включено измененное название и номер страницы. Чтобы обновить таблицу ссылок, щелкните слева от нее и нажмите клавишу F9.
Не следует изменять элементы в готовой таблице ссылок; все такие изменения будут потеряны при обновлении таблицы.
Редактирование и форматирование элементов таблицы ссылок
Чтобы изменить элемент таблицы ссылок, необходимо отредактировать текст в его поле.
Если поля TA не отображаются, на вкладке Главная в группе абзац нажмите кнопку Показать или скрыть .
Найдите поле таблицы для элемента, который вы хотите изменить.
Чтобы отредактировать и отформатировать элемент таблицы ссылок, измените текст, заключенный в кавычки.
<TA \l «Baldwin v. Alberti, 58 Wn. 2d 243 (1961)» \s «Baldwin v. Alberti» \c 1 \b >
Чтобы обновить таблицу ссылок, щелкните слева от нее и нажмите клавишу F9.
Изменение и добавление категорий ссылок
Если вы не хотите использовать стандартные категории ссылок, такие как судебные решения или законодательные акты, вы можете добавить или изменить категории.
Нажмите клавиши ALT+SHIFT+I.
Выполните одно из указанных ниже действий.
Чтобы заменить существующую категорию, выберите ее.
Чтобы добавить новую категорию, выберите номер от 8 до 16.
В поле Заменить на введите имя категории, которую вы хотите добавить, в список Категория.
Нажмите кнопку Заменить.
Нажмите кнопку ОК, а затем — кнопку Закрыть.
Удаление элемента из таблицы ссылок
Если поля TA не отображаются, на вкладке Главная в группе абзац нажмите кнопку Показать или скрыть .
Выделите все поле элемента таблицы ссылок, включая фигурные скобки <>, и нажмите клавишу DELETE.
Чтобы обновить таблицу ссылок, щелкните слева от нее и нажмите клавишу F9.
Я не могу установить строку таблицы как ссылку на что-то. Я могу использовать только css и html. Я пробовал разные вещи от div в строке к чему-то другому, но все равно не могу заставить его работать.
У вас есть два способа сделать это:
Я сделал вторую работу, используя:
Чтобы избавиться от мертвого пространства между столбцами:
Я создал пользовательскую функцию jquery:
JQuery
Легко и идеально для меня. Надеюсь, это поможет вам.
(Я знаю, что OP хочет только CSS и HTML, но рассмотрим jQuery)
Изменить
Согласовано с Мэттом Кантором, используя данные attr. Отредактированный ответ выше
Если вы используете браузер, который поддерживает его, вы можете использовать CSS для преобразования в строку таблицы:
Если вы не можете использовать JavaScript, вы должны использовать трюк:
Добавьте одну и ту же ссылку к каждой TD той же строки (ссылка должна быть самым внешним элементом в ячейке).
Поверните ссылки на элементы блока: a
Последний заставит ссылку заполнить всю ячейку, поэтому щелчок в любом месте вызовет ссылку.
Если вам нужно использовать таблицу, вы можете поместить ссылку в каждую ячейку таблицы:
И заставьте ссылки заполнить все ячейки:
Если вы можете использовать
Вот CSS, который идет с методом
И добавьте его в таблицу следующим образом:
Ответ от sirwilliam лучше всего подходит мне. Я улучшил Javascript с поддержкой горячей клавиши Ctrl + LeftClick (открывается страница на новой вкладке). Событие ctrlKey используется ПК, metaKey для Mac.
Javascript
Пример
Javascript. Вы можете добавить это, например, в стандартный файл javascript.
HTML Теперь вы можете использовать это для любого элемента
внутри вашего HTML
Что-то вроде этого? Хотя он использует JS, но это единственный способ сделать строку (tr) доступной.
Если у вас нет одной ячейки с привязным тегом, который заполняет всю ячейку.
И тогда вы не должны использовать таблицу в любом случае.
После прочтения этой темы и некоторых других я придумал следующее решение в javascript:
Чтобы использовать его, поставьте href в tr/td/th, который вы хотите кликать, например:
. И убедитесь, что script выше выполняется после создания элемента tr (путем размещения или использования обработчиков событий).
Вы можете специально указать ссылку TRs с помощью «tr [href]» селектора CSS.
У меня есть другой путь. Особенно, если вам нужно отправить данные с помощью jQuery
Установите переменную, задающую переменные в SESSIONS, на которых вы будете читать и действовать. страница
Мне бы очень хотелось, чтобы вы отправлялись прямо в окно, но я не думаю, что это возможно.
Когда я хочу имитировать ссылку со ссылкой, но соблюдая стандарты html, я делаю это.
Таким образом, когда кто-то идет с помощью мыши на TR, вся строка (и эта ссылка) получает стиль наведения, и он не видит, что существует несколько ссылок.
В HTML таблицы применяются не только привычным нам образом (как набор данных, распределенных по ячейкам, строкам и столбцам), но и для удобства размещения информации на странице. Проще говоря, можно представить всю html-страницу в виде таблицы и, например, поместить меню в её левый столбец, основную информацию в средний столбец, а дополнительные ссылки в правый столбец. Количество столбцов, строк и, соответственно, ячеек выбирается только тобой и может быть любым.
С траница, которую ты сейчас читаешь, изначально была построена по этому принципу: она разбита на несколько строк, а каждая строка на столбцы (причём, в разных строках разное количество столбцов). В некоторые из получившихся ячеек, в свою очередь, помещены ещё таблицы (таблицы вставлены в таблицы). Ты можешь это увидеть даже чисто визуально.
В общем, использование таблиц в HTML значительно упрощает создание сайта. Впрочем, ты сам всё увидишь! Поэтому давай перейдем непосредственно к практике.
§ 1. Создание таблицы
Н апример, создадим таблицу, состоящую из одной строки и двух столбцов. HTML-код будет выглядеть так:
Н о обычно строк и столбцов в таблице много и при такой записи ты будешь постоянно путаться. Поэтому, поначалу, рекомендую использовать первый способ.
§ 2. Рамка таблицы (границы)
П о-умолчанию, таблица в браузерах представляется без рамки. Чтобы рамка таблицы была видна, используется уже знакомый тебе по предыдущим разделам атрибут «border»:
И тогда браузер покажет:
Первая ячейка
Вторая ячейка
З начение атрибута «border» влияет только на внешнюю рамку, границы между ячейками изменять нельзя. Их можно либо показывать, либо нет. Например, если изменить значение атрибута «border» с «1» на «5»:
Первая ячейка
Вторая ячейка
М ожно поменять цвет рамки таблицы с помощью атрибута «bordercolor». Например:
Т огда в браузере мы увидим:
Первая ячейка
Вторая ячейка
§ 3. Отступы в таблице
Ч тобы изменить отступы между соседними ячейками таблицы, в HTML используется атрибут «cellspacing». Давай для наглядности усложним таблицу: сделаем две строки по три столбца и применим атрибут «cellspacing»:
Первая ячейка
Вторая ячейка
Третья ячейка
Четвертая ячейка
Пятая ячейка
Шестая ячейка
Д ля того, чтобы задать отступы внутри ячеек применяется атрибут «cellpadding». Если в нашем HTML-коде поменять первую строку:
Первая ячейка
Вторая ячейка
Третья ячейка
Четвертая ячейка
Пятая ячейка
Шестая ячейка
§ 4. Объединение ячеек таблицы
Ч тобы объединить ячейки таблицы по горизонтали (столбцам) или по вертикали (строкам), в HTML применяются следующие атрибуты:
colspan — объединение ячеек по горизонтали (столбцам);
rowspan — объединение ячеек по вертикали (строкам).
Н апример, изменим наш HTML-код так:
Т огда в браузере мы увидим:
Первая и вторая ячейки
Третья ячейка
Четвертая ячейка
Пятая ячейка
Шестая ячейка
Первая ячейка
Вторая ячейка
Третья и шестая ячейки
Четвертая ячейка
Пятая ячейка
§ 5. Заголовок таблицы
В браузере это выглядит так:
Заголовок таблицы
Первая ячейка
Вторая ячейка
Третья ячейка
Четвертая ячейка
Пятая ячейка
Шестая ячейка
К заголовку таблицы можно применить атрибут «align». Для выравнивания относительно таблицы.
У атрибута «align» бывают следующие значения:
Заголовок таблицы
Первая ячейка
Вторая ячейка
Третья ячейка
Четвертая ячейка
Пятая ячейка
Шестая ячейка
§ 6. Размеры таблицы
И зменить размеры таблицы и ячеек можно с помощью следующих атрибутов:
И х значения задаются в пикселах или процентах. Например:
В ыглядеть это будет так:
Первая ячейка
Вторая ячейка
Третья ячейка
Четвертая ячейка
Пятая ячейка
Шестая ячейка
§ 7. Выравнивание таблицы
В HTML горизонтальное выравнивание таблицы относительно страницы производится с помощью уже известного тебе атрибута «align». Его значения также тебе уже знакомы:
П о умолчанию, выравнивание происходит по левому краю. Пример:
Первая ячейка
Вторая ячейка
Третья ячейка
Четвертая ячейка
Пятая ячейка
Шестая ячейка
Д ля того, чтобы выровнять текст в таблице (и другое её содержимое), нужно использовать атрибут «align» для каждой конкретной ячейки! Т.к. именно в ячейках располагается всё содержимое таблицы. Пример:
Первая ячейка (выровнена по правому краю)
Вторая ячейка (выровнена по центру)
Третья ячейка
Четвертая ячейка
Пятая ячейка
Шестая ячейка (выровнена по правому краю)
Д ля вертикального выравнивания содержимого ячеек предназначен атрибут «valign», у которого есть следующие значения:
§ 8. Фон таблицы
В HTML цвет фона таблицы или отдельных её ячеек устанавливается с помощью атрибута «bgcolor». О том, как в HTML выбрать нужный цвет того или иного элемента мы говорили в уроке про атрибуты тега body. Пример:
В браузере мы увидим:
Первая ячейка
Вторая ячейка
Третья ячейка
Четвертая ячейка
Пятая ячейка
Шестая ячейка
В качестве фона таблицы или отдельной ячейки можно использовать картинки. В HTML это делается при помощи атрибута «background». Значением атрибута «background» является адрес до изображения (как в HTML вставляется графика мы изучали в этом уроке). Пример картинки-фона для всей таблицы:
Первая ячейка
Вторая ячейка
Третья ячейка
Четвёртая ячейка
Д ля отдельной ячейки картинка-фон задаётся так:
Первая ячейка
Вторая ячейка
Третья ячейка
Четвёртая ячейка
§ 9. Заключение
В HTML таблицы, как я уже говорил в самом начале, используются, главным образом, для разметки страниц. В этом их основное предназначение. В каждую ячейку таблицы можно вставить любые другие данные: текст, картинки или другую таблицу. Именно поэтому они так удобны для разметки html-страниц и разбивки их на отдельные блоки. Например, можно создать такую «композицию»:
Эх, где моя молодость!
И это самое простое из того, что можно сделать с помощью таблиц! Создание сайта на основе табличной вёрстки под силу абсолютно любому новичку! Этот урок тому доказательство.
В общем, сейчас настало самое время для самостоятельных экспериментов. Так как урок о создании таблиц в HTML закончен. А вместе с ним закончен и мой рассказ об основах HTML.
И мея эти знания, я начал варганить весь этот сайт. Поэтому тебе я настоятельно рекомендую применить полученные знания на практике. Хотя впереди ещё предстоит раздел о метатегах в HTML, но они прямого отношения к созданию сайта не имеют. Так что закрепляй знания из этой части и жми кнопку «Дальше».
.
