Html тег

Алан-э-Дейл       11.03.2024 г.

Еще примеры

Как выровнять таблицу по правому краю (с помощью CSS):

<table style=»float:right»>  <tr>   
<th>Месяц</th>    <th>Экономия</th>  </tr> 
<tr>    <td>Январь</td>   
<td>$100</td>  </tr>  <tr>   
<td>Февраль</td>    <td>$80</td>  </tr>
</table>

Как добавить цвет фона в таблицу (с помощью CSS):

<table style=»background-color:#00FF00″>  <tr>   
<th>Месяц</th>    <th>Экономия</th>  </tr> 
<tr>    <td>Январь</td>   
<td>$100</td>  </tr>  <tr>   
<td>Февраль</td>    <td>$80</td>  </tr>
</table>

Как установить высоту ячейки таблицы (с помощью CSS):

<table>  <tr>    <th>Месяц</th>   
<th>Экономия</th>  </tr>  <tr>    <td
style=»height:100px»>Январь</td>    <td
style=»height:100px»>$100</td>  </tr></table>

Как указать отсутствие переноса слов в ячейке таблицы (с помощью CSS):

<table>  <tr>    <th>Стих</th>  </tr>
  <tr>    <td style=»white-space:nowrap»>Никогда не приувеличивайте,
сверх того, что необходимо, количество сущностей, необходимых для объяснения чего-либо</td>  </tr></table>

Как выровнять содержимое по вертикали внутри <td> (с помощью CSS):

<table style=»width:50%;»>  <tr>   
<th>Месяц</th>    <th>Экономия</th>  </tr> 
<tr style=»height:100px»>    <td
style=»vertical-align:bottom»>Январь</td>    <td
style=»vertical-align:bottom»>$100</td>  </tr></table>

Как установить ширину таблицы (с помощью CSS):

<table style=»width:400px»>  <tr>   
<th>Месяц</th>    <th>Экономия</th>  </tr> 
<tr>    <td>Январь</td>   
<td>$100</td>  </tr>  <tr>   
<td>Февраль</td>    <td>$80</td>  </tr>
</table>

Как создать заголовки таблицы:

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

<table> 
<caption>Ежемесячные сбережения</caption>  <tr>   
<th>Месяц</th>    <th>Экономия</th>  </tr> 
<tr>    <td>Январь</td>   
<td>$100</td>  </tr>  <tr>   
<td>Февраль</td>    <td>$80</td>  </tr>
</table>

HTML Reference

HTML by AlphabetHTML by CategoryHTML Browser SupportHTML AttributesHTML Global AttributesHTML EventsHTML ColorsHTML CanvasHTML Audio/VideoHTML Character SetsHTML DoctypesHTML URL EncodeHTML Language CodesHTML Country CodesHTTP MessagesHTTP MethodsPX to EM ConverterKeyboard Shortcuts

HTML Tags

<!—>
<!DOCTYPE>
<a>
<abbr>
<acronym>
<address>
<applet>
<area>
<article>
<aside>
<audio>
<b>
<base>
<basefont>
<bdi>
<bdo>
<big>
<blockquote>
<body>
<br>
<button>
<canvas>
<caption>
<center>
<cite>
<code>
<col>
<colgroup>
<data>
<datalist>
<dd>
<del>
<details>
<dfn>
<dialog>
<dir>
<div>
<dl>
<dt>
<em>
<embed>
<fieldset>
<figcaption>
<figure>
<font>
<footer>
<form>
<frame>
<frameset>
<h1> — <h6>
<head>
<header>
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<kbd>
<label>
<legend>
<li>
<link>
<main>
<map>
<mark>
<meta>
<meter>
<nav>
<noframes>
<noscript>
<object>
<ol>
<optgroup>
<option>
<output>
<p>
<param>
<picture>
<pre>
<progress>
<q>
<rp>
<rt>
<ruby>
<s>
<samp>
<script>
<section>
<select>
<small>
<source>
<span>
<strike>
<strong>
<style>
<sub>
<summary>
<sup>
<svg>
<table>
<tbody>
<td>
<template>
<textarea>
<tfoot>
<th>
<thead>
<time>
<title>
<tr>
<track>
<tt>
<u>
<ul>
<var>
<video>
<wbr>

HTML Tags

<!—><!DOCTYPE><a><abbr><acronym><address><applet><area><article><aside><audio><b><base><basefont><bdi><bdo><big><blockquote><body><br><button><canvas><caption><center><cite><code><col><colgroup><data><datalist><dd><del><details><dfn><dialog><dir><div><dl><dt><em><embed><fieldset><figcaption><figure><font><footer><form><frame><frameset><h1> — <h6><head><header><hr><html><i><iframe><img><input><ins><kbd><label><legend><li><link><main><map><mark><meta><meter><nav><noframes><noscript><object><ol><optgroup><option><output><p><param><picture><pre><progress><q><rp><rt><ruby><s><samp><script><section><select><small><source><span><strike><strong><style><sub><summary><sup><svg><table><tbody><td><template><textarea><tfoot><th><thead><time><title><tr><track><tt><u><ul><var><video>

HTML Теги

<!—…—><!DOCTYPE><a><abbr><acronym><address><applet><area><article><aside><audio><b><base><basefont><bdi><bdo><big><blockquote><body><br><button><canvas><caption><center><cite><code><col><colgroup><data><datalist><dd><del><details><dfn><dialog><dir><div><dl><dt><em><embed><fieldset><figcaption><figure><font><footer><form><frame><frameset><h1> — <h6><head><header><hr><html><i><iframe><img><input><ins><kbd><label><legend><li><link><main><map><mark><meta><meter><nav><noframes><noscript><object><ol><optgroup><option><output><p><param><picture><pre><progress><q><rp><rt><ruby><s><samp><script><section><select><small><source><span><strike><strong><style><sub><summary><sup><svg><table><tbody><td><template><textarea><tfoot><th><thead><time><title><tr><track><tt><u><ul><var><video>

Цвет фона и текста

Для того чтобы указать фон ячейки таблицы HTML, строки или отдельной ячейки, к тегам <table>, <td> и <tr> можно применить следующие параметры:

  • background — в качестве фона используется изображение. Указать можно либо имя файла, либо путь к нему;
  • bgcolor — фоном является определённый цвет. Указать можно как название интересующего оттенка, так и шестнадцатеричный код.

Для того чтобы изменить цвет текста в таблице HTML, необходимо использовать тег <font>.

Например:

<table border="1" bgcolor="green">
<tr height="40" bgcolor="blue">
    <td><font color="white">Ячейка 1</font></td>
    <td bgcolor="red"></td>
</tr>
<tr>
    <td background="http://t2.gstatic.com/images?q=tbn:ANd9GcRfByY7DCMopoeaahCdF4Yi7HWMo89lEYTZVJb4GAew7ZlZNiPW">Ячейка 3</td>
    <td>Ячейка 4</td>
</tr>
</table>

Отступы таблицы в HTML

В HTML отступы в таблице задаются с помощью тега <table>:

  • cellspacing — расстояние между границами соседних ячеек;
  • cellpading — расстояние между содержимым и границей ячейки.

Например:

<table border="1" bgcolor="green" cellspacing="20" cellpadding="20">
<tr height="40" bgcolor="blue">
    <td><font color="white">Ячейка 1</font></td>
    <td bgcolor="red"></td>
</tr>
<tr>
    <td>
 background="http://t2.gstatic.com/images?q=tbn:ANd9GcRfByY7DCMopoeaahCdF4Yi7HWMo89lEYTZVJb4GAew7ZlZNiPW">Ячейка 3</td>
    <td>Ячейка 4</td>
</tr>
</table>

Визуальное отображение данного кода в браузере таково:

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

Вы можете для каждой отдельной ячейки или строки задать два параметра, которые выполняют горизонтальное (align) и вертикальное (valign) выравнивание текста в таблице HTML.

Параметр align может иметь следующие значения:

  • left — выравнивание по левой границе;
  • right — выравнивание по правой границе;
  • center — выравнивание по центру.

Параметр valign может иметь такие значения:

  • bottom — выравнивание по нижней границе;
  • top — выравнивание по верхней границы;
  • middle — выравнивание посередине.

Пример:

<table border= "1">
 <td width="300" height="200">Текст 1</td>
   <td width="300" height="200" align="right" valign="top">Текст 2</td>
</table>

Как сделать таблицу по центру в HTML? С помощью упомянутого значения center.

Например:

<table cellpadding="0" cellspacing="0" width="100%" height="100%">
  <tr>
    <td align="center">
      <table cellpadding="60" cellspacing="4" border="1">
        <tr>
          <td>
            Текст таблицы
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Вставка изображения в HTML таблицу

У вебмастеров часто возникает вопрос о том, как вставить картинку в HTML таблицу? Для того чтобы это осуществить, необходимо прописать адрес или имя изображения в соответствующей ячейке после тега <td>.

Например:

<table border= "1">
<tr align="left"> 
   <td><img src="http://amadeya.users.photofile.ru/photo/amadeya/1288508/xlarge/42642197.jpg"></td> 
   <td> Содержимое 2 ячейки </td> </tr>
<tr align="right"> 
   <td> Содержимое 3 ячейки </td>
    <td> Содержимое 4 ячейки </td> </tr>
</table>

Дополнительными атрибутами в данном случае являются:

  • width — ширина;
  • height — высота;
  • alt — альтернативный текст, который отображается в браузере при отключенной функции отображения изображений;
  • title — подпись к картинке;
  • align — горизонтальное выравнивание;
  • valign — вертикальное выравнивание.

Кроме того, облачив изображение в специальный тег <a href=»страница, на которую ведёт ссылка»><img src=»имя файла.jpg»></a>, его можно использовать в качестве ссылки.

Объединение ячеек в HTML таблице

Соседствующие ячейки внутри одного столбца или строки можно объединить с помощью параметров rowspan и colspan тега <td>.

Объединение столбцов одной строчки выглядит так:

<table border="1">
<tr>
   <td colspan="3">Текст 2</td>
</tr>
<tr>
   <td>Текст 2</td>
   <td>Текст 3</td>
   <td>Текст 4</td>
</tr>
</table>

У HTML таблицы объединение ячеек одного столбца выглядит следующим образом:

<table border="1">
<tr>
   <td rowspan="3">Текст 1</td>
   <td>Текст 2</td>
</tr>
<tr>
   <td>Текст 3</td>
</tr>
<tr>
   <td>Текст 4</td>
</tr>
</table>

More Examples

How to align content inside <td> (with CSS):

<table style=»width:100%»>  <tr>   
<th>Month</th>    <th>Savings</th>  </tr> 
<tr>    <td>January</td>    <td
style=»text-align:right»>$100</td>  </tr>  <tr>   
<td>February</td>    <td
style=»text-align:right»>$80</td>  </tr></table>

How to add background-color to table cell (with CSS):

<table>  <tr>    <th>Month</th>   
<th>Savings</th>  </tr>  <tr>    <td
style=»background-color:#FF0000″>January</td>    <td
style=»background-color:#00FF00″>$100</td>  </tr> </table>

How to set the height of a table cell (with CSS):

<table>  <tr>    <th>Month</th>   
<th>Savings</th>  </tr>  <tr>    <td
style=»height:100px»>January</td>    <td
style=»height:100px»>$100</td>  </tr></table>

How to specify no word-wrapping in table cell (with CSS):

<table>  <tr>    <th>Poem</th>  </tr>  <tr>    <td
style=»white-space:nowrap»>Never increase, beyond what is necessary, the
number of entities required to explain anything</td>  </tr></table>

How to vertical align content inside <td> (with CSS):

<table style=»width:50%;»>  <tr>   
<th>Month</th>    <th>Savings</th>  </tr> 
<tr style=»height:100px»>    <td
style=»vertical-align:bottom»>January</td>    <td
style=»vertical-align:bottom»>$100</td>  </tr></table>

How to set the width of a table cell (with CSS):

<table style=»width:100%»>  <tr>   
<th>Month</th>    <th>Savings</th>  </tr> 
<tr>    <td style=»width:70%»>January</td>   
<td style=»width:30%»>$100</td>  </tr></table>

How to create table headers:

How to create a table with a caption:

<table> 
<caption>Monthly savings</caption>  <tr>   
<th>Month</th>    <th>Savings</th>  </tr> 
<tr>    <td>January</td>   
<td>$100</td>  </tr>  <tr>   
<td>February</td>    <td>$80</td>  </tr>
</table>

HTML Справочник

HTML Теги по алфавитуHTML Теги по категорииHTML ПоддержкаHTML АтрибутыHTML ГлобальныеHTML СобытияHTML Названия цветаHTML ХолстHTML Аудио/ВидеоHTML ДекларацииHTML Набор кодировокHTML URL кодHTML Коды языкаHTML Коды странHTTP СообщенияHTTP методыКовертер PX в EMКлавишные комбинации

HTML Теги

<!—…—>
<!DOCTYPE>
<a>
<abbr>
<acronym>
<address>
<applet>
<area>
<article>
<aside>
<audio>
<b>
<base>
<basefont>
<bdi>
<bdo>
<big>
<blockquote>
<body>
<br>
<button>
<canvas>
<caption>
<center>
<cite>
<code>
<col>
<colgroup>
<data>
<datalist>
<dd>
<del>
<details>
<dfn>
<dialog>
<dir>
<div>
<dl>
<dt>
<em>
<embed>
<fieldset>
<figcaption>
<figure>
<font>
<footer>
<form>
<frame>
<frameset>
<h1> — <h6>
<head>
<header>
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<kbd>
<label>
<legend>
<li>
<link>
<main>
<map>
<mark>
<meta>
<meter>
<nav>
<noframes>
<noscript>
<object>
<ol>
<optgroup>
<option>
<output>
<p>
<param>
<picture>
<pre>
<progress>
<q>
<rp>
<rt>
<ruby>
<s>
<samp>
<script>
<section>
<select>
<small>
<source>
<span>
<strike>
<strong>
<style>
<sub>
<summary>
<sup>
<svg>
<table>
<tbody>
<td>
<template>
<textarea>
<tfoot>
<th>
<thead>
<time>
<title>
<tr>
<track>
<tt>
<u>
<ul>
<var>
<video>
<wbr>

Атрибуты и свойства тега

К открывающему тегу <table> можно прописывать различные атрибуты.

1. Свойство align=»параметр» — задает выравнивание таблицы. Может принимать следующие значения:

  • left — выравнивание по левому краю
  • center — выравнивание по центру
  • right — выравнивание по правому краю

В разобранном выше примере мы выравнивали таблицу по центру align=»center».

Этот атрибут можно применять не только к таблице, но и к отдельным ячейкам таблицы <td> или строкам <tr>. Таким образом, в разных ячейках выравнивание будет разное.

Например

2. Свойство background=»URL» — задает фоновой рисунок. Вместо URL должен быть написан адрес фонового изображения.

Пример

Преобразуется на странице в следующее:

Пример таблицы
Столбец 1 Столбец 2

В рассмотренном примере наше фоновое изображение находится в папке img (которая находится в той же директории, что и html-страница), а называется изображение fon.gif

Обратите внимание на то, что в теге мы добавили style=»color:white;». Поскольку фон почти черный, то для того, чтобы текст не слился с фоном, мы сделали текст белым

Более подробно про фон читайте в статье: как сделать фон для сайта

3. Свойство bgcolor=»цвет» — задает цвет фона таблицы. В качестве цвета можно выбрать любой из всей палитры (см. коды и названия html цветов)

4. Свойство border=»число» — задает толщину рамки таблицы. В предыдущих примерах мы указывали border=»1″, что означает толщина рамки — 1 пиксель.

5. Свойство bordercolor=»цвет» — задает цвет рамки. Если border=»0″, то рамки не будет и цвет рамки не будет иметь смысла.

6. Свойство cellpadding=»число» — отступ от рамки до содержимого ячейки в пикселях.

7. Свойство cellspacing=»число» — расстояние между ячейками в пикселях.

8. Свойство cols=»число» — число столбцов. Если его не задать, то браузер сам определит число столбцов. Разница лишь в том, что указание этого параметра, скорее всего, ускорит загрузку таблицы.

9. Свойство frame=»параметр» — как отображать границы вокруг таблицы. Может принимать следующие значения:

  • void — не отрисовывать границы
  • border — граница вокруг таблицы
  • above — граница по верхнему краю таблицы
  • below — граница снизу таблицы
  • hsides — добавить только горизонтальные границы (сверху и снизу таблицы)
  • vsides — рисовать только вертикальные границы (слева и справа от таблицы)
  • rhs — граница только на правой стороне таблицы
  • lhs — граница только на левой стороне таблицы

10. Свойство height=»число» — задает высоту таблицы: либо в пикселях, либо в процентах.

11. Свойство rules=»параметр» — где отображать границы между ячейками. Может принимать следующие значения:

  • all — линия рисуется вокруг каждой ячейки таблицы
  • groups — линия отображается между группами, которые образуются тегами <thead>, <tfoot>, <tbody>, <colgroup> или <col>
  • cols — линия отображается между колонками
  • none — все границы скрываются
  • rows — граница рисуется между строками таблицы, созданными через тег <tr>

12. Свойство width=»число» — задает ширину таблицы: либо в пикселях, либо в процентах.

13. Свойство class=»имя_класса» — можно указать имя класса, которому принадлежит таблица.

14. Свойство style=»стили» — стили можно задать индивидуально для каждой таблицы.

Теперь настало время погрузиться внутрь таблицы и рассмотреть атрибуты ячеек таблицы. Эти атрибуты надо писать в открывающем теге <td>.

HTML тэги tr и td

  • align — выравнивает текст в ячейках по горизонтали, может принимать значения: слева (right), справа (left), по центру (center),
  • valign — выравнивает текст в ячейках по вертикали, может принимать значения: вверх (top),
    вниз (bottom), по центру (middle),
  • bgcolor — задает цвет строки.

html tr

Название таблицы
1 2 3
11 Текст во всех ячейках этой строки
центрирован по центру как по вертикали,
так и по горизонтали
12 13
21 Здесь текст прижат к левому краю
по горизонтали и книзу — по вертикали
22 23
31 Текст во всех ячейках этой строки
прижат по горизонтали к правому краю,
по вертикали — кверху
32 33

<td><td>bgcolor=»red»

21 Здесь текст прижат к левому краю
по горизонтали и книзу — по вертикали

  • width — задает ширину столбца (в пикселах или в процентном соотношении, где за 100% принимается ширина
    таблицы),
  • height — задает высоту ячейки, причем все ячейки в этой же строке станут этой высоты.

<th>
1
2
3

Предыдущий урок Вернуться в раздел Следующий урок
Скачайте одним архивом видеоуроки HTML!

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

Код кнопки:<a href=»http://site-do.ru»><img src=»http://site-do.ru/images/sitedo1.gif» alt=»Как создать свой сайт»></a>
Гость форума
От: admin

Эта тема закрыта для публикации ответов.