Границы HTML таблиц без CSS
Создание визуальных границ у HTML таблиц без использования CSS и атрибута border тега table:
| Header | Header |
|---|---|
| Data | Data |
table cellspacing blue">3" bgcolor blue">#000000"> tr bgcolor blue">#ffffff"> th>Header/th> th>Header/th> /tr> tr bgcolor blue">#ffffff"> td>Data/td> td>Data/td> /tr> /table>
Границы HTML таблиц без CSS
Некогда, главным образом (но не только) в 1990ые существовало несколько приемов HTML, использовавшихся, чтобы добиться некоторых эффектов, которые ныне делаются с помощью CSS. Обращение с границами HTML таблиц было одним из них.
В данном случае, на самом деле, имеет место не обращение с границами, а его имитация через использование атрибутов cellspacing и bgcolor. Аналогично тому, как в настоящее время обстоит дело с HTML выравниванием по центру, этот способ вполне работающий, даже если в большинстве случаев более удобно примененять CSS.
Общая идея
- Атрибут bgcolor тега table задает фон указанного цвета.
- Атрибут bgcolor тега tr используется, чтобы фон содержимого таблицы (то есть, строки и ячейки) стал указанного цвета, отличающегося от фона тега table.
- Атрибут cellspacing тега table создает пространство вокруг ячеек таблицы. Это пространство получает цвет, установленный атрибутом bgcolor тега table, а поскольку он отличается от фона строк и ячеек, это создает вокруг ячеек визуальные границы цвета фона таблицы.
Древние Netscape, Mozilla и Arachne
Создание границ HTML таблиц без CSS используется с самых ранних времен Интернета. Так что после некоторой корректировки будет работать в Netscape 3.04 — 6.0, Mozilla 0.6 — 1.7.13 и в Arachne, браузере для DOS:
table cellspacing blue">0" cellpadding blue">0" border blue">0" bgcolor blue">#000000"> tr> td> table cellspacing blue">3" border blue">0"> tr bgcolor blue">#ffffff"> th>Header/th> th>Header/th> /tr> tr bgcolor blue">#ffffff"> td>Data/td> td>Data/td> /tr> /table> /td> /tr> /table>
Примечание: этот скорректированый HTML код роботает не только в Netscape 3.04 — 6.0, Mozilla 0.6 — 1.7.13 или Arachne, но так же и во всех браузерах и их версиях, перечисленных в секции «Поддержка в браузерах»: как современных, так и старых.
Поддержка в браузерах
Windows Internet Explorer 3.0+ Firefox 1.0+ Google Chrome Opera 2.12+ Safari 3.1+ SeaMonkey 1.0+ Mozilla 1.0+ Netscape 7.0+ Linux Firefox 1.0+ Google Chrome / Chromium Opera 5.0+ SeaMonkey 1.0+ Mozilla 1.0+ Netscape 7.0+ NetSurf 3.0 Dillo 3.0.2
Ещё
Как сделать таблицу в HTML
Откройте текстовый редактор, например, Visual Studio Code. Если вы ещё не работали с VS Сode, то сначала прочитайте статью.
Первый шаг
Второй шаг
Теперь добавим для создания заголовка таблицы.
Третий шаг
Заголовок 1 Заголовок 2
Четвёртый шаг
После добавим для создания тела таблицы — в него мы добавляем ячейки с информацией.
Заголовок 1 Заголовок 2
Пятый шаг
Заголовок 1 Заголовок 2
Шестой шаг
Заголовок 1 Заголовок 2 Ячейка 1,1 Ячейка 1,2 Ячейка 2,1 Ячейка 2,2
Седьмой шаг
Вы можете добавить атрибуты к тегам, чтобы изменить внешний вид таблицы. Например, для установки границ таблицы и ячеек, используем атрибут border со значением 1 :
Заголовок 1 Заголовок 2 Ячейка 1,1 Ячейка 1,2 Ячейка 2,1 Ячейка 2,2
Сохраните файл с расширением .html и откройте его в веб-браузере, чтобы увидеть созданную таблицу.
Или можете воспользоваться нашим генератором.
Генератор таблицы
Сгенерировать таблицу
HTML код таблицы
Скопируйте его и используйте в своих HTML-документах.
Материалы по теме
- Как добавить изображение на страницу
- Как сделать кнопку
- Как сделать картинку ссылкой
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше
Знакомство с HTML
Привет, будущие фронтенд-разработчики! Добро пожаловать в увлекательный мир веб-разработки. Перед тем как двигаться дальше, давайте разберёмся с основами — языком разметки гипертекста или просто HTML.
Что такое HTML?
HTML (Hypertext Markup Language) — это стандартный язык, который используется для создания веб-страниц. Представьте, что ваша веб-страница — это книга. Тогда HTML — это скелет этой книги, костяк, который определяет структуру: где будет заголовок, абзацы, изображения и так далее.
Основы разметки
Всё начинается с тегов. Тег — это элемент языка разметки, который определяет, какой тип содержимого будет представлен.
Теги обычно идут парами: открывающий тег
Мой заголовок
Это мой первый абзац. Привет, мир!
Некоторые теги можно не закрывать:
Теги и атрибуты
У тегов могут быть атрибуты. Это дополнительные характеристики, которые помогают определить свойства элемента. Например, у тега атрибут src указывает путь к изображению:
Атрибут alt описывает изображение, это полезно, если изображение не загрузится или для программ чтения экрана.
Формы и элементы форм
Формы используются для сбора данных от пользователей. Например, когда вы вводите что-то в поисковой строке или заполняете регистрационную форму.
- — это тег формы.
- action — куда отправляются данные.
- method — метод отправки (обычно get или post ).
- — поле для ввода данных. Тип text означает текстовое поле.
- — метка для поля ввода.
Списки в HTML
Списки позволяют нам организовывать данные в упорядоченном (нумерованном) или неупорядоченном (с маркерами) виде.
Упорядоченные списки создаются с помощью тегов (ordered list) и (list item):
- Первый элемент списка
- Второй элемент списка
- Третий элемент списка
- Элемент списка с маркером
- Еще один элемент с маркером
Ссылки и навигация
Чтобы ваши пользователи могли переходить от одной страницы к другой, используются ссылки. Тег для создания ссылки — , атрибут href указывает на адрес, куда должна вести ссылка:
Таблицы
Имя Возраст Джон 30 Элис 25
Использование изображений
Семантическая разметка
Семантическая разметка важна для доступности и SEO. Это использование элементов HTML по их предназначению, например:
Заголовок статьи
Первый абзац статьи.
Это основы, которые сформируют крепкий фундамент для начала работы с HTML. Следующий шаг — погружение в CSS, чтобы оживить и улучшить визуальную составляющую ваших веб-страниц. Но об этом — в нашей следующей статье. Стройте свои веб-страницы с удовольствием и не бойтесь экспериментировать! ��
- 1 ноября 2023
Специальные символы в HTML
HTML использует особенные комбинации символов, чтобы корректно отображать определенные знаки на веб-страницах. Например, вместо простого знака «меньше» мы видим комбинацию <. В этой статье представлен список таких символов. Это небольшой справочник для тех, кто хочет быстро найти нужный код.
- 23 октября 2023
Простое диалоговое окно на HTML
Вот короткое демо:
- 18 октября 2023
Зачем нужен метатег viewport
Каждый из нас хоть раз в жизни сталкивался с веб-страницами, которые кажутся «сломанными» или странно отображаются на мобильных устройствах. Одной из причин такого поведения может быть отсутствие маленького, но важного элемента в коде страницы — метатега viewport .
Метатеги — это инструкции для браузера о том, как отображать содержимое страницы. Один из таких метатегов — viewport , который говорит браузеру, как масштабировать и отображать страницу на разных устройствах, особенно на смартфонах и планшетах.
Важно, чтобы сайты классно выглядели не только на компьютерах, но и на маленьких экранах смартфона. Если не использовать viewport , то сайт может выглядеть как уменьшенная версия десктопного сайта на мобильном экране, что делает его трудночитаемым и неудобным для использования. Конечно, нужно ещё много всего сделать для адаптивности, но viewport тоже нужен.
- 18 сентября 2023
Атрибут class в HTML на примерах
Атрибут class используется для добавления CSS-классов элементам HTML. Классы позволяют применять одни и те же стили CSS или поведение JavaScript к разным элементам на странице.
Так, одному элементу можно присвоить один или несколько классов, разделяя их пробелами.
- 14 сентября 2023
В чём отличия цитат blockquote, cite и q
В HTML есть разные теги для цитирования и указания источников. Основные из них: , и . Давайте разберёмся в их различиях.
- 12 сентября 2023
Осмысленный alt-текст: 6 правил
Альтернативный текст — это описание изображения словами. Это описание должно помогать людям, которые читают или слышат это описание, иначе оно не нужно и лучше вообще его не указывать.
Мы уже обсудили основные правила написания alt-текста для фотографий и изображений. В этот раз поговорим о том, каким именно должно быть описание, чтобы в нём был смысл.
- 31 июля 2023
Растровая и векторная графика
Давайте попробуем разобраться, в чём отличие растровой графики от векторной.
- 13 июня 2023
Как понять, что перед вами заголовок
Заголовки используются для организации и структурирования содержимого на сайте. В HTML существует шесть уровней заголовков, обозначаемых тегами от до . Каждый уровень заголовка имеет свой семантический вес, где имеет наибольший вес, а — наименьший.
Часто кажется, что заголовок — это простой и понятный тег. Но это впечатление обманчиво, потому что не всегда крупный и выделенный текст на макете является заголовком.
При вёрстке сайта важно соблюдать семантику, чтобы все теги использовались корректно и ресурс работал без ошибок. Если напутать уровни заголовков, то структура страницы будет не семантичной, а скринридеры неправильно прочтут сайт.
В статье разберёмся, как верно определять заголовки по макету, какие из них лучше делать скрытыми и почему.
- 8 июня 2023
Как правильно вставлять SVG
Есть несколько способов вставки SVG-изображения. Выбор одного из них зависит от задач, которые стоят перед верстальщиком.
SVG — это формат векторной графики, дословно: масштабируемая векторная графика. МВГ? SVG! В векторных форматах хранится не само изображение, а инструкция по его построению по точкам и кривым.
В растровых форматах информация о конкретном числе точек изображения плотно упакована в бинарный кирпич. В него бесполезно заглядывать и менять его можно только в редакторах графики.
�PNG IH�aV PLTE�������0� IDAcZ�d���� �W= S�3�o;���]P ���IEND�B`�~ Формат SVG тоже можно создавать и менять в редакторах графики, например, в Illustrator или Figma. Но ещё он текстовый, а значит его можно открыть как HTML или CSS в любом редакторе кода.
SVG — это как отдельная HTML-страница. Когда вставляете SVG, вы, на самом деле, вставляете не просто картинку, а целую страницу. Со своей системой координат, вьюпортом, стилями, скриптами и удивительными особенностями.
Если смотреть на SVG как на отдельную страницу — становится понятнее, какой способ вставки вам нужен.
- 1 июня 2023
Как сделать таблицу в html с границами
HTML-таблицы используются для логического структурирования контента. Они состоят из строк и ячеек которые можно объединять. В этой статье вы найдете подробное руководство по созданию HTML-таблиц с нуля. Материал рассчитан на новичков — школьников и студентов первых курсов. Рассмотрим как создаются таблицы в HTML.
Если вы не хотите изучать материал, а хотите просто создать таблицу, вы можете воспользоваться генератором html-таблиц.
Как сделать таблицу в HTML?
Таблицы создаются они с помощью тега
. Код самой простой таблицы из двух строк и столбцов выглядит следующим образом.
| Ячейка 1 | Ячейка 2 |
| Ячейка 3 | Ячейка 4 |
Результат выполнения кода будет следующим.
| Ячейка 1 | Ячейка 2 |
| Ячейка 3 | Ячейка 4 |
Стиль по умолчанию:
display: table;
border-collapse: separate;
box-sizing: border-box;
text-indent: initial;
white-space: normal;
line-height: normal;
font-weight: normal;
font-size: medium;
font-style: normal;
color: -internal-quirk-inherit;
text-align: start;
border-spacing: 2px;
border-color: grey;
font-variant: normal;
Границы таблицы
В стилях таблиц по умолчанию граница отсутствует. Добавить границы можно с помощью HTML-кода и с помощью CSS.
Устанавливает границу равную 1 пикселю, серого цвета. Равнозначным будет CSS-код:
table
| Ячейка 1 | Ячейка 2 |
| Ячейка 3 | Ячейка 4 |
Цвет границ задается с помощью bordercolor, а размер с помощью border.
Как убрать внутренние границы таблицы?
Вопрос очень интересный. Есть множество способов как так или иначе убрать внутренние границы в таблице. Но, я считаю, что самый простой способ это убрать все границы в таблице, «завернуть» таблицу в блок с границами. Это будет гораздо проще чем все остальные способы.
Давайте разберемся на примере.
Таблица сотрудников фирмы ФИО Должность Иванов Иван Иванович Директор Петрова Любовь Николаевна Главный бухгалтер
| ФИО | Должность |
|---|---|
| Иванов Иван Иванович | Директор |
| Петрова Любовь Николаевна | Главный бухгалтер |
Строка таблицы
Ячейки таблицы
Заголовок таблицы
Существует тег для создания заголовка таблицы и тег для создания заголовка столбца.
Для создания заголовка столбца используется тег (от англ. table head — заголовок таблицы).
Все это немного запутано, правда? Давайте разбираться на примере.
| ФИО | Должность |
|---|---|
| Иванов Иван Иванович | Директор |
| Петрова Любовь Николаевна | Главный бухгалтер |
| ФИО | Должность |
|---|---|
| Иванов Иван Иванович | Директор |
| Петрова Любовь Николаевна | Главный бухгалтер |
Таблица по центру
Этот вариант применим если нам нужно выровнять по центру одну таблицу. Если же нам нужно выровнять по центру все таблицы, тогда лучше применить CSS-код.
table
Размер таблицы
Если вы не указываете размер таблицы, то он определяется количеством текста (или иного контента) внутри. проще говоря таблица растягивается по размеру контейнера в котором она находится.
При этом можно указать размеры таблицы в пикселях, где width — ширина таблицы, height — высота таблицы. Например, сделаем нашу таблицу шириной 400 пикселей.
| ФИО | Должность |
|---|---|
| Иванов Иван Иванович | Директор |
| Петрова Любовь Николаевна | Главный бухгалтер |
