Вы можете добавлять таблицы на веб-страницы, чтобы упростить Структурирование текста, изображений и объектов на странице. Это можно сделать, чтобы показать данные в таблице, прайс-, сравнить продукты, список терминов и определений и т. д. Это также можно сделать для размещения содержимого, например Показать биографиес сотрудников, контактные данные или рабочие часы. В этой статье объясняется, как разместить или структурировать содержимое на странице с помощью редактора таблиц и других методов, таких как HTML и CSS.
В этой статье
Вставка таблицы
Чтобы вставить таблицу на страницу, лот на Microsoft 365 учетную запись, откройте редактор веб-сайтов и выполните указанные ниже действия.
-
Перейдите на веб-страницу, на которую вы хотите добавить таблицу.
-
Откройте вкладку страница .
-
Нажмите кнопку " изменить ".
-
Щелкните страницу, на которую вы хотите добавить таблицу.
-
Откройте вкладку Вставка.
-
Нажмите кнопку " Таблица ".
-
Существует два способа добавления таблицы:
-
Щелкните стрелку, чтобы развернуть сетку таблицы, наведите указатель мыши на сетку таблицы, а затем щелкните нужное количество ячеек таблицы.
-
Или нажмите кнопку Вставить таблицу , введите нужное количество столбцов и строк, а затем нажмите кнопку ОК.
-
-
Таблица будет добавлена на веб-страницу, на которой можно добавить к ней содержимое или настроить ее, а также описанные ниже задачи.
Настройка таблицы
После вставки таблицы на веб-страницу вы можете приступить к ее настройке. Вы можете добавлять и удалять строки или столбцы, объединять и разбивать строки или столбцы, изменять размер таблицы, изменять внешний вид и т. д.
Добавление строк и столбцов
Вы можете добавлять в таблицу строки и столбцы, чтобы иметь более структурированный контент на странице. Вы можете добавить их сверху, снизу, слева или справа от ячейки, в которой находится курсор. Только целые строки или столбцы могут быть добавлены одновременно, а не отдельными ячейками.
Добавление строк или столбцов в таблице
-
Отредактируйте веб-страницу, содержащую таблицу.
-
Поместите курсор в ячейку таблицы, в которую нужно добавить строку или столбец.
-
Откройте вкладку Макет таблицы .
-
Выберите один из указанных ниже вариантов.
-
Вставить сверху , чтобы добавить строку над выделенной ячейкой.
-
Чтобы добавить строку под выделенной ячейкой, вставьте поле ниже .
-
Вставить слева , чтобы добавить столбец слева от выделенной ячейки.
-
Вставка вправо для добавления столбца справа от выделенной ячейки.
-
Совет: Если вы не хотите, чтобы результат в новых ячейках не устраивает, вы можете отменить действие, нажав клавиши CTRL + Z или открыв вкладку Формат текста и выбрав команду отменить.
Вы увидите, что изменения немедленно применены к таблице. Если в ячейках есть текст или изображения, они будут помещены вместе в новую объединенную ячейку.
Объединение ячеек
При объединении ячеек вы объединяете две или несколько ячеек, чтобы предоставить больше места для текста, изображений и других объектов в таблице. Ячейки можно объединять сверху или снизу друг от друга, но можно объединять только отдельные ячейки, а не целые строки или столбцы.
Объединение ячеек в таблице
-
Отредактируйте веб-страницу, содержащую таблицу.
-
Поместите курсор в ячейку таблицы, которую вы хотите объединить.
-
Откройте вкладку Макет таблицы .
-
Нажмите кнопку объединить ячейки и выберите один из указанных ниже вариантов.
-
Объединение сверху и слияние с указанной выше ячейкой.
-
Объедините ниже , чтобы объединить с ячейкой ниже.
-
Объединить слева , чтобы объединить ячейки слева.
-
Объединение справа , чтобы объединить ячейки справа.
-
Совет: Если результат объединения ячеек вам не устраивает, вы можете отменить это действие, нажав клавиши CTRL + Z или открыв вкладку Формат текста и выбрав команду отменить.
Вы увидите, что изменения немедленно применены к таблице. Если в ячейках есть текст или изображения, они будут помещены вместе в новую объединенную ячейку.
Разделение ячеек
После разделения ячеек вы можете превратить одну ячейку в две, чтобы применить к содержимому таблицы дополнительную структуру. Ячейки можно разделять по горизонтали или по вертикали, но можно разделять только отдельные ячейки, а не целые строки или столбцы.
Разбиение ячеек в таблице
-
Отредактируйте веб-страницу, содержащую таблицу.
-
Поместите курсор в ячейку таблицы, которую вы хотите разделить.
-
Откройте вкладку Макет таблицы .
-
Щелкните разбить ячейки и выберите один из следующих вариантов:
-
Разделите ячейки по горизонтали , чтобы разделить ее на две ячейки, рядом друг с другом.
-
Разделите по вертикали , чтобы разделить ячейку на две ячейки.
-
Совет: Если вы не хотите выводить результаты разбиения ячеек, вы можете отменить действие, нажав клавиши CTRL + Z или открыв вкладку Формат текста и выбрав команду отменить.
Вы увидите, что изменения немедленно применены к таблице. Если в ячейке есть текст или изображения, они останутся в исходной ячейке, а не в новой.
Изменение размера таблицы
Вы можете изменить размер таблицы, а также отдельных строк и столбцов, образующих таблицу. Это можно сделать, чтобы разместить больше содержимого в ячейке таблицы или освободить место в оставшейся части страницы для другого содержимого. Вы можете указать размер таблицы или ячейки в пикселях (ПКС) или процентах (%). Одновременно можно изменить размер только всей строки, столбца или таблицы, а не отдельных ячеек.
Изменение размера таблицы
-
Отредактируйте веб-страницу, содержащую таблицу.
-
Поместите курсор в таблицу, размер которой нужно изменить.
-
Откройте вкладку Макет таблицы .
-
В разделе " Ширина таблицы" введите значение в процентах или пикселах. Значение 100% или 700px или больше использует всю область содержимого страницы.
-
В разделе " высота таблицы" введите значение в процентах или пикселах. Имейте в виду, что число абзацев также определяет высоту таблицы.
-
В разделе Ширина столбцавведите значение в процентах или пикселах. Значение 100% или 700px или больше использует всю область содержимого страницы.
-
В разделе Высота столбцавведите значение в процентах или пикселах. Имейте в виду, что число абзацев также определяет высоту таблицы ячейки.
Совет: Если результат изменения размера таблицы или ячейки вам не устраивает, вы можете отменить действие, нажав клавиши CTRL + Z или открыв вкладку Формат текста и выбрав команду отменить.
Вы увидите, что изменения немедленно применены к таблице. Если в ячейках есть текст или изображения, они остаются в ячейке с измененным размером.
Изменение стиля таблицы
Вы можете настраивать внешний вид таблицы, изменяя ее стиль, назначая строки верхнего или нижнего колонтитула, а также применяйте форматирование к первой и последней строкам или столбцам таблицы.
Изменение стиля таблицы
-
Отредактируйте веб-страницу, содержащую таблицу.
-
Поместите курсор в таблицу, которую вы хотите настроить.
-
Откройте вкладку сайт .
-
Выберите один из приведенных ниже параметров стиля таблицы. (Возможно, не будут видны различия форматирования, если к таблице применен стиль таблицы "светлое" или "очистить".)
-
Строка заголовков применяет специальное форматирование к первой строке таблицы.
-
Строка нижнего колонтитула применяет специальное форматирование к последней строке таблицы.
-
Первый столбец применяет специальное форматирование к первому столбцу таблицы.
-
Последний столбец применяет специальное форматирование к последнему столбцу таблицы.
-
-
Выберите стиль таблицы. Каждый стиль изменяет цвет границы, цвет ячейки и цвет верхнего или нижнего колонтитула. (Некоторые стили изменяют верхний и нижний колонтитулы только в том случае, если вы выбрали этот параметр выше.)
-
Стиль таблицы по умолчанию — светлый: тонкие, светлые, серые границы сетки.
-
Стиль таблицы 1 — Clear: нет видимых границ.
-
Стиль таблицы 2 — светлая: светлые горизонтальные линии, все остальные строки, затененные серым цветом.
-
Стиль таблицы 3 – средние два тона: синий верхний колонтитул, все остальные строки выделены темно-синим цветом.
-
Стиль таблицы 4 — светлые линии: серый верхний колонтитул, светло-синие горизонтальные линии.
-
Стиль таблицы 5 — сетка: серые границы сетки, все остальные строки, затененные серым цветом.
-
Стиль таблицы 6 — диакритические 1: синие границы сетки, синий заголовок.
-
Стиль таблицы 7 — диакритические символы 2; Светло-синие границы сетки, светло-синий заголовок.
-
Стиль таблицы 8 — диакритические 3: зеленые границы сетки, зеленый верхний колонтитул.
-
Стиль таблицы 9 — диакритические 4: оливковый — границы сетки, оливковый заголовок.
-
Стиль таблицы 10 — диакритические 5: красные границы сетки, красный заголовок.
-
Стиль таблицы 11 — ударения 6: фиолетовые границы сетки, фиолетовый заголовок.
-
-
Нажмите кнопку Показать линии сетки , чтобы отобразить или скрыть линии сетки таблицы. Это визуальная помощь в том случае, если вы применили стиль очистки таблицы или, в противном случае, с границами таблиц, но по-прежнему необходимо просматривать таблицу для работы с ней.
Вы увидите, что изменения немедленно применены к таблице. Если в ячейке есть текст или изображения, они останутся в исходной ячейке с примененным новым стилем.
Добавление текста или объектов в таблицу
Завершив настройку таблицы, вы можете приступить к добавлению в нее содержимого, такого как текст, рисунки и другие объекты, как описано здесь.
Добавление текста или объектов в таблицу
-
Отредактируйте веб-страницу, содержащую таблицу.
-
Поместите курсор в ячейку таблицы, в которую вы хотите добавить содержимое.
-
Чтобы добавить текст, просто начните вводить текст или вставьте текст в ячейку таблицы. Чтобы изменить шрифт или размер шрифта, откройте вкладку Формат текста и выберите в нем параметры шрифта.
-
Чтобы вставить изображение, видео или другой объект, откройте вкладку Вставка и вставьте объект, как на любой из ваших веб-страниц. (Если изображение или видео больше ячейки таблицы, размер ячейки таблицы изменится автоматически в соответствии с изображением или видео.)
-
Чтобы удалить текст, изображения или объекты, выделите их в ячейке и нажмите клавишу Delete на клавиатуре.
Удаление ячейки, строки, столбца или таблицы
При необходимости вы можете удалить отдельные ячейки, строки, столбцы или всю таблицу.
Удаление ячейки, строки, столбца или таблицы
-
Отредактируйте веб-страницу, содержащую таблицу.
-
Поместите курсор в ячейку, строку, столбец или таблицу, которую вы хотите удалить.
-
Откройте вкладку Макет таблицы .
-
Нажмите кнопку Удалить и выберите один из указанных ниже вариантов.
-
Удалите ячейку , чтобы удалить отдельную ячейку, в которой находится курсор.
-
Удалить столбец , чтобы удалить столбец, в котором находится курсор.
-
Удалить строку , чтобы удалить строку, в которой находится курсор.
-
Удалите таблицу , чтобы удалить всю таблицу, в которой находится курсор.
-
Продолжайте настраивать таблицу или содержимое на странице.
Создание собственной таблицы, HTML-контента или CSS
Если вы хотите создать настраиваемую таблицу или использовать собственный HTML-код в CSS для размещения содержимого на странице, это можно сделать, создав HTML-код в редакторе веб – страниц, например Expression Web или Dreamweaver. Внесите изменения в редактор, а затем скопируйте и вставьте код веб-страницы на ваш общедоступный веб-сайт, выполнив указанные ниже действия.
Добавление настраиваемой таблицы или кода веб-страницы на веб-сайт
-
Отредактируйте веб-страницу, для которой вы хотите добавить таблицу или HTML-контент.
-
Откройте вкладку Формат текста и выберите команду изменить источник в группе исправлений.
-
В окне исходного HTML-кода введите или вставьте собственный HTML-код или измените существующее содержимое, например применение тегов DIV. (Окно исходного кода HTML также полезен для копирования таблицы из одной части веб-сайта в другую, что быстрее, чем повторное создание и настройка таблицы.)
-
Нажмите кнопку ОК , а затем сохраните страницу.
-
Для дальнейшей настройки HTML (например, с помощью слоев каскадных стилей CSS) откройте вкладку сайт и выберите команду изменить таблицу стилей.
-
В окне Изменение таблицы стилей добавьте настраиваемый CSS и нажмите кнопку сохранить.
Совет: Для дальнейшей настройки макета и расположения контента на странице можно создать собственный макет страницы с помощью диспетчера макетов.
