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

CSS: Оформление таблиц

Рамка таблицы

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

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

и

.

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

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

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

Размер таблицы зависит от ее содержимого, но часто возникают ситуации, когда таблица оказывается слишком узкой и появляется необходимость ее растянуть. Ширину и высоту таблицы можно изменять с помощью свойств width и height, задавая нужные размеры или самой таблице или ячейкам:

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

По умолчанию текст в заголовочных ячейках таблицы выравнивается по центру, а в обычных ячейках текст выровнен по левому краю, используя свойство text-align можно управлять выравниванием текста по горизонтали.

CSS свойство vertical-align позволяет управлять выравниванием текстового содержимого по вертикали. По умолчанию текст выровнен вертикально по центру ячеек. Вертикальное выравнивание можно переопределить с помощью одного из значений свойства vertical-align :

Чередование фонового цвета строк таблицы

При просмотре больших таблиц, содержащих много строк с большим количеством информации, бывает трудно отследить, какие данные относятся к конкретной строке. Чтобы помочь пользователям сориентироваться, можно использовать два разных фоновых цвета поочередно. Для создания описанного эффекта можно использовать селектор class, добавляя его к каждой второй строке таблицы:

Добавлять атрибут class к каждой второй строке довольно утомительное занятие. В CSS3 был добавлен псевдо-класс :nth-child, позволяющий решить эту проблему альтернативным путем. Теперь эффекта чередования можно достичь исключительно средствами CSS, не прибегая к изменению HTML-разметки документа. С помощью псевдо-класса :nth-child можно выбрать все четные или нечетные строки таблицы, используя одно из ключевых слов: even (четные) или odd (нечетные):

Изменение фона строки при наведении курсора

Еще одним способом повышения удобочитаемости табличных данных является изменение фонового цвета строки при наведении на нее курсора мыши. Это поможет выделить нужное содержимое таблицы и повысит визуальное восприятие данных.

Реализовать такой эффект очень просто, для этого нужно добавить псевдо-класс :hover к селектору строки таблицы и задать нужный цвет фона:

Выравнивание таблицы по центру

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

Источник

Как сделать таблицу в word по центру?

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

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

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

1. Установить курсор внутри таблицы.

2. Открыть окно свойств таблицы (меню «Таблица» — «Свойства таблицы…»).

3. Перейти на вкладку «Таблица»

4. В области «Обтекание» выставить «вокруг»

5. Нажать кнопку «Размещение…»

6. В открывшемся окне «Размещение таблицы» в области «По вертикали» выбрать в поле «положение:» элемент «от центра», а в поле «относительно:» элемент «Страницы».

Эти же действия можно записать простым макросом:

Думаю, кому-то это может пригодиться, раз уже несколько раз задавали вопросы на форуме.

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

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

Урок: Как в Ворде сделать таблицу

В этой небольшой статье мы расскажем о том, как можно выровнять текст в таблице MS Word, а также о том, как выровнять саму таблицу, ее ячейки, столбцы и строки.

Выравниваем текст в таблице

1. Выделите все данные в таблице или отдельные ячейки (столбцы или строки), содержимое которых нужно выровнять.

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

2. В основном разделе “Работа с таблицами” откройте вкладку “Макет”.

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

3. Нажмите кнопку “Выровнять”, расположенную в группе “Выравнивание”.

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

4. Выберите подходящий вариант для выравнивания содержимого таблицы.

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

Урок: Как в Ворде скопировать таблицу

Выравнивание всей таблицы

1. Кликните по таблице, чтобы активировать режим работы с ней.

2. Откройте вкладку “Макет” (основной раздел “Работа с таблицами”).

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

3. Нажмите кнопку “Свойства”, расположенную в группе “Таблица”.

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

4. Во вкладке “Таблица” в открывшемся окне найдите раздел “Выравнивание” и выберите необходимый вариант выравнивания для таблицы в документе.

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

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

Урок: Как в Word сделать продолжение таблицы

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

Мы рады, что смогли помочь Вам в решении проблемы.

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

Помогла ли вам эта статья?

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

Для этой цели можно использовать несколько методов. Рассмотрим каждый из них более детально.

Самый простой способ

Создавать таблицу проще всего следующим образом:

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

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

Данный метод самый быстрый и удобный.

Как создать большую таблицу

В выше описанном методе можно построить объект с максимальными размерами 10 колонок на 8 строк. Но иногда необходимо вставить таблицу с большим количеством ячеек. В этом случае необходимо:

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

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

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

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

Как нарисовать таблицу

Кроме этого, редактор Word позволяет чертить таблицу собственноручно. Для этого:

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

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

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

Как добавить таблицу Excel

Помимо всего этого, Word позволяет разместить в документе таблицы редактора «Эксель». Процесс происходит следующим образом.

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

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

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

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

Для того чтобы отформатировать эту таблицу как-нибудь по-другому (увеличить или уменьшить количество ячеек, изменить границы и так далее) в редакторе «Эксель», необходимо выполнить следующую инструкцию.

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

Как скопировать таблицу из Excel

Как правило, намного проще и удобнее находиться в самом Экселе, чем наблюдать перенос его функций в Word. Вы всегда можете создать и оформить таблицу в полноценном редакторе, а потом копировать её куда хотите. Переносить её можно различными способами.

Быстрее всего это делается вот так:

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

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

Как вставить экспресс-таблицу

На создание красивых объектов уходит много времени. Намного проще работать с готовыми таблицами в самом Ворде. При этом вас не просят скачать какое-нибудь дополнение или расширение. Всё доступно автоматически по умолчанию и бесплатно.

Делаем всё по порядку.

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

Преобразование таблицы

Редактор Word позволяет преобразовать информацию в текстовом виде в табличный формат. Сделать это очень просто.

Лучше поменять значение на что-нибудь другое. Абзац подходит только в том случае, когда ваш текст не состоит лишь из одной строки.

В качестве примера можно указать:

Как очистить информацию

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

Убрать оформление ячеек можно следующим способом.

Как удалить таблицу

Если хотите уничтожить своё творение, вам придется выполнить следующие манипуляции.

Либо нажмите на клавишу Backspace.

Как вставить картинку

Иногда бывают ситуации, когда в таблицу необходимо вставить какой-нибудь рисунок или любое другое графическое изображение.

Делается это довольно просто.

Изменение полей документа

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

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

Переместить границы можно при помощи линейки. Для этого достаточно:

Также нередки случаи, когда таблице не хватает места по вертикали (сверху или снизу) и она переходит на следующую страницу. Подобный случай не критичен, если объект занимает большую часть следующего листа. Но если там находится только одна строчка, то это выглядит некрасиво.

В таких ситуациях вы можете при помощи линейки поднять верхнюю границу рабочего пространства или же выбрать готовые форматы полей. Это делается следующим образом:

Повторение заголовка на каждой странице

Продолжаем тему длинных таблиц. По умолчанию шапка отображается только вначале. И сколько бы страниц у вас ни было, вы её увидите только в самом верху. Это не совсем удобно. Особенно когда приходится работать со строками в большом количестве.

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

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

Благодаря этому не нужно делать лишние движения при просмотре этой информации с первой страницы. Это очень важно, если вы делаете какую-нибудь презентацию для посторонних людей, поскольку они могут забыть невидимую шапку. И в итоге будут задавать лишние вопросы. Например – что и где расположено.

Как открепить шапку

Если вам больше не нужно, чтобы первая строка переносилась на все следующие листы, достаточно будет повторить описанные выше действия, и всё вернется в прежний вид.

Если вы смогли закрепить шапку, то и отменить это сможете без особых усилий.

Как отсортировать данные в ячейках

Сортировка клеток происходит следующим образом:

Как отобразить сетку

Иногда бывает так, что часть границ невидима. Возможно, кто-то попытался скрыть их намерено. Например, для того, чтобы их не было видно при печати.

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

Обратите внимание: данные пунктирные линии видны только в процессе работы с документом. При печати на другом компьютере они будут не видны (только если там не включена эта же функция).

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

Редактирование каркаса таблицы

Изменить внешний вид данного элемента можно различными способами. Рассмотрим их более внимательно.

Как добавить новые строки и столбцы

Это можно сделать следующими действиями:

При добавлении новых колонок нужно быть очень внимательным. Важно посчитать, хватит ли места. Поскольку если таблица и так большая (она занимает всё расстояние между границами листа), то для новых элементов часть пространства переносится с уже существующих. В итоге может произойти искажение внешнего вида. Таким образом, вы сможете потерять красивую таблицу. Поэтому будьте очень внимательны.

Те же самые манипуляции можно выполнить и при помощи контекстного меню.

Удаление строк и столбцов

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

Как правило, разработчики Microsoft любят дублировать различные функции на панели инструментов и в контекстном меню. И этот случай не исключение.

Если вы кликните правой кнопкой мыши по какой-нибудь клетке, то увидите контекстное меню. В нём нужно будет выбрать пункт «Удалить ячейки».

Затем нужно будет указать, что и как именно необходимо удалить:

Перед тем как что-то удалять, перепроверьте, всё ли правильно вы сделали. Если вы случайно уничтожите что-то важное, достаточно будет нажать на горячие клавиши Ctrl+Z.

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

Объединить клетки довольно просто.

Те же самые действия можно сделать и при помощи панели инструментов. В этом случае ход действий будет таков:

Результат будет точно таким же. Вы можете использовать то, что удобнее всего вам.

Как разбить ячейки

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

В этом случае от вас требуются следующие действия.

Мы уже ранее говорили, что в редакторе Word многие функции дублируются в разных меню. То же самое и тут. Некоторым людям намного удобнее пользоваться панелью инструментов, чем контекстным меню.

В этом случае инструкция выглядит следующим образом.

Оформление

В редакторе Word с таблицами можно сделать что угодно. Например, вы сможете:

Рассмотрим некоторые манипуляции более детально.

Редактирование границ

Для того чтобы настроить внешний вид границ, нужно сделать следующие действия.

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

Благодаря этому вы увидите следующее окно. Здесь вы сможете:

Готовые стили

Кроме этого, можно использовать готовые шаблоны. Делается это очень просто.

Как изменить высоту и ширину ячеек

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

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

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

Для этой цели используются стандартные кнопки, которые расположены на главной панели инструментов. С их помощью вы сможете выровнять текст:

Направление текста

Если вы хотите повернуть текст, изменить его положение или сделать зеркальный поворот, нужно будет выполнить следующие операции.

Результат будет следующим.

Как изменить стиль

Если вам лень настраивать границы и заливку вручную, лучше использовать готовые шаблоны от MS Word. Сделать это довольно просто.

Редактирование стиля

При желании вы можете внести свои изменения. Составление своих шаблонов довольно интересный процесс. Происходит он следующим образом.

Очистка оформления

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

Создание своего стиля

Выше мы уже говорили о редактировании шаблонов. Но там речь шла об изменении уже существующих. Если вы хотите создать что-то с нуля, нужно будет сделать следующие действия.

Заливка ячеек

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

Свойства таблицы

Все описанные выше настройки (которые были разбросаны по разным местам) можно найти в одном меню.

Вы можете настраивать каждый параметр отдельно при помощи панели инструментов либо редактировать их в этом окне. Разницы абсолютно никакой нет.

Как построить график по таблице

В редакторе Ворд нет возможности строить графики и диаграммы по данным из текущего документа. Для этой цели используются встроенные таблицы Excel. Это происходит следующим образом.

Если вам необходимо использовать данные из вашего документа, то вы можете просто скопировать их в Excel. Тогда график построится уже по обновленным данным.

Как перевести таблицу в PDF-файл

В качестве конвертера будем использовать программу Adobe Acrobat, поскольку она установлена у большинства пользователей.

Процесс конвертации «ПДФ-файла» происходит следующим образом.

Помимо указанного способа есть масса других. Точнее, существует больше количество программ и сайтов, которые могут сделать то же самое.

Использование формул в таблицах

Важно понимать, что Word – это не Excel. В данном случае количество и возможности формул сильно ограничены. Для того чтобы вставить их в ячейки таблицы, нужно выполнить следующие операции.

Ознакомиться с этим инструментом более детально можно на официальном сайте Microsoft.

Отличие версий

Данная инструкция подходит для современных редакторов Word (2007, 2010, 2013 и 2016 годов). В Ворд 2003 процесс происходит иначе. Для создания таблиц в старой версии используется отдельное меню. В новых программах это можно сделать при помощи вкладки «Вставка».

Практически везде в каждом пункте принцип работы одинаковый. Только в 2003 году не было возможности использовать экспресс-таблицы или «Таблицы Excel». Можно было только перенести при помощи клавиш Ctrl+C Ctrl+V.

Сильно отличается только выбор стилей.

Стили

Для того чтобы настроить внешний вид таблицы, нужно выполнить следующие шаги.

Заключение

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

Данная инструкция предназначена как для чайников, так и уверенных в себе пользователей. Даже у последних могут возникать вопросы: «Почему?», «Откуда?», «Как?» и так далее. Если у вас что-то не получается, возможно, вы что-то делаете не так. Или же – выделяете не те ячейки.

Видеоинструкция

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

Источник

3.7. Выравнивание таблицы и содержимого ячеек

3.7. Выравнивание таблицы и содержимого ячеек

Для выравнивания элементов таблиц по горизонтали и вертикали в элементах TABLE, TR, TH и TD используют атрибуты align и valign.

Атрибут align применяется ко всем элементам таблицы и определяет общее горизонтальное выравнивание:

– таблицы на странице по левому краю/правому краю/по центру;

– элементов строки по левому краю/правому краю/по центру;

– заголовка таблицы по левому краю/правому краю/по центру (по умолчанию по центру);

– данных в ячейке по левому краю/ правому краю/по центру/по заданному символу (по умолчанию по левому краю).

Атрибут valign также применяется ко всем элементам таблицы и определяет общее вертикальное выравнивание:

– элементов таблицы внизу/по центру/вверху (по умолчанию по центру);

– элементов строки внизу/по центру/ вверху;

создает строку, а тег

– заголовка таблицы внизу/по центру/ вверху;

– данных в ячейке внизу/по центру/ вверху.

В листинге 3.6 приведен пример использования в различных комбинациях описанных выше атрибутов форматирования таблицы и содержимого ячеек (рис. 3.11).

Листинг 3.6. Пример использования выравнивания таблицы и содержимого ячеек

Источник

Определение в Википедии: Табличная верстка — условное название метода верстки HTML-документов, при котором в качестве структурной основы для расположения текстовых и графических элементов документа используются таблицы (то есть HTML-тег ).

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

Создание таблицы: строки и ячейки. Заголовок таблицы

Таблица создается с помощью тега

— он открывает таблицу. Обязательный тег

информирует браузер о завершении таблицы.

Любая таблица состоит из столбцов и строк.

Тег

ячейку в строке. Соответственно сколько ячеек включено в строку, столько будет и столбцов в таблице.

Содержимое ячейки, созданной тегом

по умолчанию располагается в ее левой чаcти.

Тег создает заголовок таблицы, он располагается внутри тега

— сразу после открывающего тега. Заголовок по умолчанию располагается над таблицей и выравнивается по ее центру.

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

1-я ячейка 1-ой строки2-я ячейка 1-ой строки
1-я ячейка 2-ой строки2-я ячейка 2-ой строки
«img/peng_32.gif» >«img/peng_32.gif» >

Выравнивание таблицы. Выравнивание содержимого ячеек

Для выравнивания таблицы используется атрибут align тега

.

При помощи атрибут align Вы можете разместить таблицу в левой или правой ( align= «left» и align= «right» ) части окна браузера (родительского элемента) или по его центру ( align= «center» ).

По умолчанию содержимое ячеек расположено по левому краю по горизонтали, и выравнено по середине в вертикальной плоскости.

Высота и ширина таблицы и ячеек

По умолчанию размеры (высота и ширина) и таблицы, и ячеек меняются в зависимости от размеров их содержимого.

Значения высоты и ширины задаются в пикселях или в процентах относительно свободного пространства. Для задания значений:

— указывается целое положительное число. В этом случае размер будет задан в пикселях;

— указывается целое положительное число с символом %.

«img/peng_64.gif» >«img/peng_64.gif» >
«img/peng_64.gif» >«img/peng_64.gif» >
«img/peng_32.gif» >«img/peng_32.gif» >

Как видно из примера: указывая ширину одной из ячеек столбца, Вы тем самым задаете ширину всего столбца; и, указывая высоту одной из ячеек строки, Вы задаете высоту всей строки.

Границы таблицы и ячеек

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

Атрибут border тега

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

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

Толщина границы задается только для таблицы. Толщина рамки вокруг ячеек всегда составляет 1 пиксель (либо отсутствует).

По умолчанию граница отображается с эффектом трехмерности и имеет черный цвет.

Атрибут bordercolor задает цвет границы и устраняет эффект трехмерности. Атрибут может использоваться для задания цвета границы таблицы (тег ), строки (тег ) или ячейки (тег ).

Атрибут bordercolor поддерживается не всеми браузерами и поэтому не рекомендуется его использовать. Для задания цвета границы лучше воспользоваться стилями (это уже в CSS).

Атрибут border не указан.Поэтому границы отсутствуют.
«img/peng_32.gif» >«img/peng_32.gif» >

Толщина границы таблицы составляет 3 пикселя.Ячейки имеют границы толщиной 1 пиксель!
«img/peng_32.gif» >«img/peng_32.gif» >

Частичное отображение границ

Граница таблицы и рамка вокруг ячеек могут быть отображены частично.

Атрибут frame тега

указывает, где рисовать границу таблицы. Атрибут rules указывает, как отобразить границы ячеек.

Установленыгоризонтальныеграницы таблицы
Иотображены границымежду колонками

Отступы внутри и снаружи ячеек

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

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

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

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

При оформлении и форматировании таблиц в HTML нередко требуется объединить рядом расположенные ячейки. И если такая необходимость возникла, то Вам следует воспользоваться атрибутами colspan и rowspan тега

.

Атрибут colspan указывает количество ячеек, которые будут объединены по горизонтали, а атрибут rowspan устанавливает количество ячеек, объединяемых по вертикали.

Оба атрибута имеют смысл, если таблица состоит из нескольких строк.

Фон таблицы. Фон ячеек таблицы

В HTML есть возможность задать общий фон как для всей таблицы, так и фон для отдельно выделенной ячейки.

Атрибут bgcolor тега

задает цвет фона таблицы. Цвет можно задать двумя способами (подробнее здесь. )

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

Напомним также о существовании атрибута cols тега

, который указывает браузеру количество столбцов в таблице.

Использование атрибута cols позволяет браузеру быстрее отобразить содержимое таблицы.

Редактирование таблицы

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

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

Источник

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *