Ячейка HTML-таблицы. Тег — журнал «Доктайп»

Тег <td> используется для создания ячейки таблицы. Он должен быть вложен в тег <tr>, который, в свою очередь, вложен в тег <table>. Ячейка может содержать текст, изображения, формы, список и другие HTML-элементы.

<table>
  <tr>
    <td>Ячейка 1</td>
    <td>Ячейка 2</td>
  </tr>
  <tr>
    <td>Ячейка 3</td>
    <td>Ячейка 4</td>
  </tr>
</table>

Атрибуты тега <td>:

  • colspan — количество объединяемых ячеек по горизонтали.
  • rowspan — количество объединяемых ячеек по вертикали.
  • headers — список id элементов, которые связаны с ячейкой.

Примеры использования

Таблица с тремя колонками (имя, фамилия и возраст) и тремя строками данных:

<table>
  <tr>
    <td>Имя</td>
    <td>Фамилия</td>
    <td>Возраст</td>
  </tr>
  <tr>
    <td>Иван</td>
    <td>Иванов</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Пётр</td>
    <td>Петров</td>
    <td>30</td>
  </tr>
</table>

В этом примере ячейки в первой строке таблицы определены с помощью тега <th>, который используется для заголовков таблицы, вместо <td>:

<table>
  <tr>
    <th>Ячейка 1</th>
    <th>Ячейка 2</th>
  </tr>
  <tr>
    <td>Ячейка 3</td>
    <td>Ячейка 4</td>
  </tr>
</table>

В этом примере используется атрибут

colspan, чтобы объединить ячейки в первой строке таблицы и создать заголовок для двух колонок:

<table>
  <tr>
    <td colspan="2">Сумма</td>
    <td>100</td>
  </tr>
  <tr>
    <td>Товар 1</td>
    <td>50</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Товар 2</td>
    <td>75</td>
    <td>25</td>
  </tr>
</table>

Важно запомнить

  • Если ячейка пустая, используйте <td></td> вместо <td/> для лучшей читаемости кода.
  • В одной строке таблицы должно быть одинаковое количество ячеек.
  • Если в ячейке нет содержимого, она всё равно отображается, но имеет нулевую высоту и ширину.
  • Если содержимое не помещается в ячейке, браузер автоматически изменит её размеры.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Читать дальше

Справочник по HTML

Основные HTML-теги в 2023 году.

  • 31 марта 2023

Глобальные атрибуты HTML

Список основных атрибутов, которые подойдут ко всему.

  • 29 марта 2023

<embed>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<div>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<option>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<ul>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<video>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<datalist>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<code>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<ruby>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

HTML/Элемент td

Синтаксис

(X)HTML

<table>
  ...
  <tr>
    ...
    <td> ... </td>
    ...
  </tr>
  ...
</table>

Описание

Элемент td (от англ. «table data» ‒ «данные таблицы») создаёт

стандартную ячейку таблицы.

Условия использования

Данный элемент может располагаться только внутри элемента tr.

Поддержка браузерами

Chrome

Поддерж.

Firefox

Поддерж.

Opera

Поддерж.

Maxthon

Поддерж.

IExplorer

Поддерж.

Safari

Поддерж.

iOS

Поддерж.

Android

Поддерж.

Спецификация

Верс.Раздел
HTML
2.0—
3.2Tables
4.0111.2.6 Table cells: The TH and TD elements
DTD: Transitional Strict Frameset
5. 04.9.9 The td element
5.14.9.9. The td element
XHTML
1.0Extensible HyperText Markup Language
DTD: Transitional Strict Frameset
1.1Extensible HyperText Markup Language

Атрибуты

abbr
Указывает краткое содержание ячейки.
align
Задаёт горизонтальное выравнивание.
axis
Группирует ячейки.
bgcolor
Задаёт цвет фона.
char
Указывает символ по которому выравнивается содержимое ячейки.
charoff
Задаёт количество символов на которое необходимо сместить содержимое ячейки.
colspan
Указывает количество объединяемых ячеек строки таблицы.
height
Задаёт высоту ячейки.
nowrap
Отключает автоматический перенос текста.
rowspan
Указывает количество объединяемых ячеек столбца таблицы.
scope
Указывает группу ячеек данных, для которых текущая ячейка выступает в качестве заголовка.
valign
Задаёт вертикальное выравнивание.
width
Указывает ширину ячейки.
Глобальные атрибуты
accesskey, class, contenteditable, contextmenu, data-*, dir, draggable, dropzone, hidden, id, inert, lang, spellcheck, style, tabindex, title, translate, xml:lang

Пример использования

Листинг кода

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Элемент td</title>
<link type=»text/css» href=»ex-style. css» rel=»stylesheet»>
</head>
<body>

<h2>Пример использования элемента «td»</h2>
<table>
<caption>Февраль 2015</caption>
<thead>
<tr> <th>Пн</th> <th>Вт</th> <th>Ср</th> <th>Чт</th> <th>Пт</th> <th>Сб</th> <th>Вс</th> </tr>
</thead>
<tbody>
<tr> <td><s>26</s></td> <td><s>27</s></td> <td><s>28</s></td> <td><s>29</s></td> <td><s>30</s></td> <td><s>31</s></td> <td>1</td> </tr>
<tr> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr>
<tr> <td>9</td> <td>10</td> <td>11</td> <td>12</td> <td>13</td> <td>14</td> <td>15</td> </tr>
<tr> <td>16</td> <td>17</td> <td>18</td> <td>19</td> <td>20</td> <td>21</td> <td>22</td> </tr>
<tr> <td>23</td> <td>24</td> <td>25</td> <td>26</td> <td>27</td> <td>28</td> <td><s>1</s></td> </tr>
</tbody>
</table>
</body>
</html>

Элемент td

HTML-таблица tr внутри td

спросил

Изменено 2 года, 4 месяца назад

Просмотрено 355 тысяч раз

Я пытаюсь создать таблицу в HTML. У меня есть следующий дизайн для создания. Я добавил внутри но почему-то таблица не создана по проекту.

Кто-нибудь может предложить мне, как я могу добиться этого?

Я не могу создать Name1 | Разделы Цена1.

  • html
  • html-table

Вы должны добавить полную таблицу внутри td

 
        <тд>
          <таблица>
            
              <тд>
                ...
              5
 Вы не можете поместить tr внутри td. Вы можете увидеть разрешенный контент из документации веб-документов MDN о  td  . Соответствующая информация находится в разделе  разрешенного контента .
 Еще один способ добиться этого — использовать  colspan  и  rowspan  . Проверьте эту скрипку.
 HTML:
 <таблица>
 

  <тд>цена3/тд>
 
 И немного CSS:
 таблица {
    граница коллапса: коллапс
}
тд {
   граница: 1px сплошная #000000
}
 
4
 Можно решить без вложенных таблиц.
 <граница таблицы="1">
    
 Полный пример:
 

      

            

          
        
      
     

  Имя 1
  Имя 2
  Имя 3
  Имя 4
 

 

  ПУНКТ 1
  ПУНКТ 2
  имя1
  цена1
  ПУНКТ 4
 

 

  имя2
  цена2
 

 

  имя3


 
        

            Азбука
            Азбука
            Азбука
            Азбука
        

    
    
        

            Элемент 1
            Элемент 1
            Элемент 1
            Элемент 1
        

        

            Имя1
            Цена1
        

        

            Имя2
            Цена2
        

        

            Имя3
            Цена3
        

        

            Элемент 2
            Элемент 2
            Элемент 2
            Элемент 2
        

    
 

    <тд>
      <граница таблицы="1">
        1
 Попробуйте этот код
 

  

    Азбука
    Азбука
    Азбука
    Азбука
  

  

    Элемент 1
    Элемент 1

          Имя 1
          Цена 1
        

        

          Имя 2
          Цена 2
        

        

          Имя 3
          Цена 3
        

      
    
    
Элемент 1
  

  

    Элемент 2
    Элемент 2
    Элемент 2
    Элемент 2
  

  

    Элемент 3
    Элемент 3
    Элемент 3
    Элемент 3
  

 
 Поместите еще одну таблицу внутри элемента td, как показано ниже.
 <таблица>
    

        ...
    
        <тд>
            <таблица>
                
...
            
...

 Просто добавьте новую таблицу   в  td , которую вы хотите. Пример: http://jsfiddle.net/AbE3Q/
 <граница таблицы="1">
  

    <тд>
      <граница таблицы="1">
        
 Вы можете проверить это, просто используя таблицу внутри таблицы, как это
 

<голова>
  <стиль>
    стол,
    й,
    тд {
      граница: 1px сплошной черный;
      граница коллапса: коллапс;
    }
  

<тело>
  <таблица>
    

      <тд>
        <таблица>
          
      <тд>С
      <тд>Д
      <тд>Р
 <граница таблицы = "1px;">
  

    <тд>
      <граница таблицы = "1px;">
        
 <таблица>
      

        <тд>
          <таблица>
            
              <тд>
                . ..
              1
 

<голова>
ТАБЛИЦА
<стиль>
    .rb{
        выравнивание текста: вправо;
        граница коллапса: коллапс;
        граница справа: 1px сплошной черный;
        нижняя граница: 1px сплошной черный;
    }
    .б{
        выравнивание текста: вправо;
        граница коллапса: коллапс;
        нижняя граница: 1px сплошной черный;
    }
    .р{
        выравнивание текста: вправо;
        граница коллапса: коллапс;
        граница справа: 1px сплошной черный;
    }
    .n{
        выравнивание текста: вправо;
    }
    
    


<тело>


  

    Имя 1
    Имя 2
    Имя 3
    Имя 4
  

  

    ПУНКТ 1
    ПУНКТ 2
    имя
    цена
    ПУНКТ 4
  

  

    имя
    цена
  

  

    имя
    цена
  

 

    

        Азбука
        Азбука

                    имя1
                    цена1
                

        
        
Азбука
    

 

    Азбука
    Азбука
    Азбука
    Азбука
  

  

    Элемент 1
    Элемент 2

          qweqwewe
          qweqwewe
        

        

          qweqwewe
          qweqwewe
        

        

          qweqwewe
          qweqwewe
        

      
    
    
Элемент 3
  

  

  

  

  

  

  

  

  

 

      Азбука
      Азбука
      Азбука
      Азбука
    

    

      Элемент 1
      Элемент 1

            имя1
            цена1
          

          

            имя2
            цена2
          

          

            имя3
            цена3
          

        
      
      
элемент1
    

    

      А
      Б
    

    

      Э
      Ф
      Г
      Н
    

    

      Э
      Т
      Т
    

  

 

    Продукт
    количество
    Цена
    Всего
  

  

    Элемент-1
    Элемент-1

          Имя1
          Цена1
        

        

          Имя2
          Цена2
        

        

          Имя3
          Цена3
        

        

          Имя4
          Цена4
        

      
    
    
Элемент-1
  

  

    Элемент-2
    Элемент-2
    Элемент-2
    Элемент-2
  

  

    Элемент-3
    Элемент-3
    Элемент-3
    Элемент-3
  

 

            

          
        
      
     

    <тд>
    <таблица ячеек = "0px">
        
            <тд>1998
            <тд>85
            <тд >1001
 Зарегистрируйтесь или войдите в систему 
 Зарегистрируйтесь с помощью Google
 Зарегистрироваться через Facebook
 Зарегистрируйтесь, используя электронную почту и пароль
 Опубликовать как гость 
 Электронная почта
 Обязательно, но не отображается
 Опубликовать как гость 
 Электронная почта
 Требуется, но не отображается
 Нажимая «Опубликовать свой ответ», вы соглашаетесь с нашими условиями обслуживания и подтверждаете, что прочитали и поняли нашу политику конфиденциальности и кодекс поведения.
 HTML: тег 
 В этом руководстве по HTML объясняется, как использовать элемент HTML, называемый тегом 
, с синтаксисом и примерами.
 Описание 
 Тег HTML 
 определяет строку в таблице HTML. Каждый тег может содержать один или несколько тегов.
 Синтаксис 
 В HTML синтаксис тега 
: (  пример таблицы с 2 столбцами и 4 строками  )
 <тело>
<таблица>
  
 Пример вывода 
 
 Атрибуты 
 Помимо глобальных атрибутов, ниже приведен список атрибутов, специфичных для тега
:



    Страна
    Население (в крорах)




    ИНДИЯ

        

            

            1999
            90
        

            

            2000
        

    




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

    Элемент
    Сумма
  

  

    Виноград
    $18
  

  

    Яблоки
    $4
  

  

    Груши
    $7
  

  
.
 Атрибут Описание HTML-совместимость
 выровнять Горизонтальное выравнивание текста в каждой ячейке строки. Это может быть одно из следующих значений: слева, по центру, справа, по ширине, символ Устарело в HTML 4.01, устарело в HTML5, используйте CSS
 цвет Цвет фона каждой ячейки в строке Устарело в HTML 4.01, устарело в HTML5, используйте CSS
 символ Установите символ для выравнивания ячеек в столбце Устарело в HTML 4.01, устарело в HTML5
 уголь Количество символов для смещения данных столбца от символов выравнивания (в атрибуте char) Устарело в HTML 4.01, устарело в HTML5
 валайн Вертикальное выравнивание текста каждой ячейки в строке. Может принимать одно из следующих значений: базовый, нижний, средний, верхний 90 168 Устарело в HTML 4.01, устарело в HTML5, используйте CSS
 Примечание 
  •  HTML-элемент находится в HTML-таблице внутри тега.
  •  Тег состоит из одного или нескольких тегов или.
  •  Тег определяет строки таблицы. В таблице должна быть хотя бы одна строка.
  •  Тег определяет ячейки заголовков в таблице, которые отображаются жирным шрифтом с выравниванием по центру.
  •  Тег определяет стандартные ячейки в таблице, которые отображаются как обычный текст с выравниванием по левому краю.
 Совместимость с браузерами 
 Тег совместим со следующими браузерами:
  •  Chrome
  •  Андроид
  •  Firefox (Геккон)
  •  Firefox Mobile (Геккон)
  •  Internet Explorer (IE)
  •  Пограничный мобильный
  •  Опера
  •  Опера Мобайл
  •  Сафари (веб-кит)
  •  Сафари Мобильный
 Пример 
 Мы обсудим тег ниже, исследуя примеры использования тега в HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1. 0 Strict и XHTML 1.1.
  •  HTML5
  •  HTML4
  •  XHTML
 Документ HTML5 
 Если вы создали новую веб-страницу в HTML5, ваш тег может выглядеть так:
 

<голова>
<мета-кодировка="UTF-8">
Пример HTML5 от www.techonthenet.com

<тело>
<таблица>
  
    Заголовок столбца 1
    Заголовок столбца 2
  
  
    Данные в столбце 1, строке 2
    Данные в столбце 2, строке 2
  
  
    Данные в столбце 1, строке 3
    Данные в столбце 2, строке 3
  


 
 В этом примере документа HTML5 мы создали таблицу с помощью тега
, которая имеет 2 столбца и 3 строки. Строка 1 таблицы определяется с помощью первого тега. Он имеет 2 ячейки заголовка таблицы, определенные с помощью тега может выглядеть следующим образом:
 

<голова>

Переходный пример HTML 4.01 от www.techonthenet.com

<тело>
<таблица>
  
 В этом примере переходного документа HTML 4.01 мы создали таблицу с помощью тега
. Строки 2 и 3 таблицы используют тег для определения стандартных ячеек таблицы.
 HTML 4.01 Transitional Document 
 Если вы создали новую веб-страницу в HTML 4.01 Transitional, ваш тег

    Заголовок столбца 1
    Заголовок столбца 2
  

  

    Данные в столбце 1, строке 2
    Данные в столбце 2, строке 2
  

  

    Данные в столбце 1, строке 3
    Данные в столбце 2, строке 3
  



 
, которая имеет 2 столбца и 3 строки. Строка 1 таблицы определяется с помощью первого тега. Он имеет 2 ячейки заголовка таблицы, определенные с помощью тега может выглядеть следующим образом:
 

<голова>

Переходный пример XHMTL 1.0 от www.techonthenet.com

<тело>
<таблица>
  
 В этом примере переходного документа XHTML 1.0 мы создали таблицу с помощью тега
. Строки 2 и 3 таблицы используют тег для определения стандартных ячеек таблицы.
 Документ XHTML 1.0 Transitional 
 Если вы создали новую веб-страницу в XHTML 1.0 Transitional, ваш тег

    Заголовок столбца 1
    Заголовок столбца 2
  

  

    Данные в столбце 1, строке 2
    Данные в столбце 2, строке 2
  

  

    Данные в столбце 1, строке 3
    Данные в столбце 2, строке 3
  



 
, которая имеет 2 столбца и 3 строки. Строка 1 таблицы определяется с помощью первого тега. Он имеет 2 ячейки заголовка таблицы, определенные с помощью тега может выглядеть следующим образом:
 

<голова>

Строгий пример XHTML 1.0 от www.techonthenet.com

<тело>
<таблица>
  
 В этом примере XHTML 1.
No related posts.
Добавить комментарий 
Ваш адрес email не будет опубликован. Обязательные поля помечены *
 
 
  
 
. Строки 2 и 3 таблицы используют тег для определения стандартных ячеек таблицы.
 XHTML 1.0 Strict Document 
 Если вы создали новую веб-страницу в XHTML 1.0 Strict, ваш тег

    Заголовок столбца 1
    Заголовок столбца 2
  

  

    Данные в столбце 1, строке 2
    Данные в столбце 2, строке 2
  

  

    Данные в столбце 1, строке 3
    Данные в столбце 2, строке 3