Как увеличить размер шрифта в таблице html
Размеры таблицы, ее высота и ширина, определяются автоматически в зависимости от того, что содержат внутри себя ячейки. Чем больше наполнения в ячейках, тем больше размеры таблицы и наоборот.
Однако возможности CSS позволяют изменить размер таблицы в HTML, указывая именно те значения ширины и высоты, которые необходимы. Справедливости ради следует отметить, что еще атрибуты таблицы позволяют задавать нужные размеры. Однако, в настоящий момент мы поговорим лишь о CSS.
Необходимо подчеркнуть, что каждая таблица имеет свою минимальную ширину и минимальную высоту, на которые влияет ее содержание. И даже если вы зададите значения ширины и высоты еще меньше, то ничего не произойдет. Стороны таблицы не переступят свой минимум.
Чтобы указать ширину таблицы необходимо использовать CSS-свойство width , а чтобы задать высоту необходимо применять свойство height .
На примере это выглядит следующим образом.
Table { width: 500px; height: 100px; }
Результат в браузере:
Полный код:
| 1 | 2 | 3 | 4 | 5 |
|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 |
| 1 | 2 | 3 | 4 | 5 |
Значения ширины и высоты таблицы могут быть заданы, как абсолютной величиной (в пикселях), так и относительной – в процентах. Например, 20px и 20% соответственно.
Если вы используете проценты, чтобы задать размеры таблицы, то они будут высчитываться, отталкиваясь от размеров родительского элемента. Если говорить о нашем примере, то речь идет про окно браузера.
Существует еще одно значение – auto. И оно является особым, поскольку с его помощью вычисление ширины и высоты таблицы происходит автоматически, по умолчанию. На практике указание этого значения выглядит вот так.
Width: auto;
Height: auto;
Хотим акцентировать ваше внимание на еще таком важном моменте. Что высоту в процентах лучше не указывать, поскольку, как правило, в таком случае они работать не буду.
Указание размеров отдельных ячеек и столбцов
Если вы считаете, что браузер не корректно задал ширину колонок, отталкиваясь от содержимого ячеек, то вы вправе размеры ячеек и столбцов указать самостоятельно. И сейчас мы поговорим о том, как изменить размер ячейки в таблице HTML.
Изменение размеров ячеек осуществляется при помощи тех же самых CSS-свойств, что и размеры таблицы, а именно: width и height .
Чтобы добавить стили ячейкам, можно использовать один из двух вариантов:
- Задать ячейкам индивидуальные имена классов. Выглядеть это будет вот так:
class="cell-50px"
А после этого следует применить стили для данных классов.
- Задействовать атрибут style , внутри которого прописать необходимый CSS-код.
На практике второй вариант будет выглядеть следующим образом:
Однако, хотим отметить, что менять размеры ячеек по отдельности необходимость возникает не так уж часто. Как правило, это делается в тех ситуациях, когда необходимо задать определенную ширину столбцов таблицы. В таком случае, задача решается проще. Необходимо всего лишь указать ширину ячеек первой строки.
| 1 | 2 | 3 | 4 | 5 |
|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 |
| 1 | 2 | 3 | 4 | 5 |
Результат в браузере:
Как изменить размер шрифта в таблице
Зачастую возникает потребность в изменении размера текста в таблице. Например, в ячейках-заголовках. Это можно сделать с помощью CSS-свойства font-size . Давайте зададим размер шрифта для элементов
Th { font-size: 30px; }
На этом данный урок заканчивается. Предлагаю хорошенько поразмыслить над домашним заданием. Прямо так внимательно его изучите и порассуждайте. Всем всего хорошего!
Как мы уже знаем, таблицы пишутся слева направо и сверху вниз. Точно так же двигаемся мы по странице нашего сайта.
Следующая по ходу нашего продвижения - центральная ячейка второй таблицы. Сюда мы будем вставлять текст. Необязательно заполнять таблицу именно в таком порядке, но в данном случае я соблюдаю этот порядок для наглядности.
Для того, чтобы текст выглядел так, как нам нужно, необходимо его отформатировать, задать если нужно отступ, шрифт, размер шрифта и прочие необходимые нам параметры.
1. Можно не ставить никакого выравнивания, просто написать текст и он по умолчанию выровняется по левому краю. А можно специально выровнять текст по центру, по левому, по правому краю или по ширине текста. Соответственно, атрибуты, которые для этого нужны:
align ="left" - по левому краю;
align ="center" - по центру;
align ="right" - по правому краю;
align ="justify" - по ширине текста.
Примечание: Если вы хотите поставить текст на страницу, без таблицы (я приводила пример страницы, сделанной без таблицы: как в этой Новеллизации) - вы просто ставите атрибут выравнивания в тег абзаца:
Так же можно выровнять текст, используя контейнерный тег
Выглядеть такой текст будет так: Текст, выровненный по центру Если нужный нам текст мы вставляем в ячейку таблицы, атрибут выравнивания нужно прописать в тэге соответствующей ячейки, в данном случае в центральной ячейке нашей второй таблицы. 2. Теперь зададим атрибуты самого текста: шрифт, цвет шрифта и размер шрифта. Для этого нужны такие атрибуты: 2.2. color - цвет; 2.3. Атрибут size задаёт размер шрифта; Крупный шрифт
Мелкий шрифт
Но я не рекомендую пользоваться таким способом, потому что размер шрифта будет зависеть от браузера пользователя. Пользователь зашедший с браузера Опера, где по умолчанию стоит масштаб 100%, увидит ваш шрифт font size="+4" умеренно крупным и легко читаемым. Пользователь, зашедший с Internet Explorer, на котором по умолчанию стоит "Самые крупные значки" увидит ваш текст просто гигантским и станет думать, не рассчитан ли ваш сайт на слабовидящих. Можно прописать размер шрифта при помощи стиля, вот так: STYLE="font-size:24pt".
Если мы зададим размер шрифта 20pt таким способом, то вся строчка будет выглядеть так: Обратите внимание, что если вы прописываете стиль, то между font и size ставится дефис: font-size. Пояснение: Название шрифта вы можете взять либо из соответствующих разделов любых уроков HTML, либо в программе Microsoft Word. Но помните, что далеко не все шрифты отражаются в разных браузерах, поэтому увлекаться экзотическими шрифтами не стоит. Пояснение 2: цвет шрифта можно задавать и словами (red, blue, green и т.п.), но тогда лучше писать вот так:
ТЕКСТ
Атрибут span означает, что мы имеем дело со встроенным элементом абзаца. Он используется для изменения вида текста или его логического выделения. Например, цветом. Названий цвета, которые в состоянии прочесть браузер, не так много, поэтому рекомендую пользоваться их числовыми значениями. Для того, чтобы узнать эти числовые значения, можно обратиться к многочисленным таблицам цветов, либо к программе Фотошоп. И любые другие таблицы цветов, какие только сможете найти. "Опасные" или "безопасные" цвета - значения не имеет. Они читаются все в равной степени. Разница состоит лишь в возможностях монитора каждого пользователя. 3. Пропишем внутрь ячейки тэг с атрибутами, необходимыми для того, чтобы задать параметры нашего текста. Порядок записи атрибутов внутрь тэга не важен. Цвет шрифта я задаю в данном случае - #000000 - чёрный: Примечание: не забывайте, что каждый тэг нужно закрыть. В данном случае, вы сперва закрываете внутренний тэг ( 4. Теперь надо задать абзац и красную строку. Но, к сожалению, этот текст будет выглядеть ровно, только в браузерах FireFox и Internet Explorer. В браузере Opera, он будет выглядеть... м-м-м... Как молодой бычок пописал...
В общем, очень неровно. Для того, чтобы задать отступ абзаца, нужно прописать для него стиль и назвать его, к примеру, "p1". Я уже объясняла, что стиль начинается с атрибута "style". Только сейчас этот атрибут будет отвечать не за цвет или размер шрифта, а за абзац и отступ текста. Этот стиль нужно записать так:
Лучше всего смотрится текст, выровненный по ширине. Именно так выравнивается текст в книгах, журналах и прочих печатных образцах. Поэтому поставим выравнивание в ячейке по ширине текста. Тэг ячейки будет выглядеть так:
2.1. font - означает шрифт;
face - лицо, то есть, наименование шрифта в языке HTML. Аналогично для задания стиля используется слово "family", о нём скажем позднее;
Шрифт Arial
Цвет шрифта (в данном случае, сиреневый)
Можно прописать размер шрифта в пунктах:
Лучше задать более точные параметры
Размер шрифта 20pt.
И зададим одновременно цвет - сиреневый и размер шрифта - 24pt:
Размер шрифта 24pt.
Слово STILE может относиться не только к шрифту, но и ко множеству других значений. Поэтому если вы прописываете стиль - атрибут, указывающий на то, что вы задаёте стиль именно размера шрифта ("font-size: 24pt"), берётся в кавычки весь: STILE="font-size: 24pt"
Можно воспользоваться вот этими таблицами цветов:
Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине.
Тэг
В языке HTML эта конструкция используется для ввода специальных символов. Если браузер встречает в тексте вот такой знак (&) (он называется - амперсанд), он начинает интерпретировать следующие за ним буквы как код специального символа. Так продолжается до тех пор, пока не встретится точка с запятой. В данном случае мы используем для добавления пробела. Добавив несколько пробелов, мы получим отступ.
Если добавить восемь таких конструкций - - у нас получится отступ на восемь знаков.
Если вы хотите чтобы ваш текст всегда, во всех браузерах выглядел профессионально, вам нужно прибегнуть к более сложному способу.