Как создать ячейки в таблице в HTML?

@pabel0071 · Регистрация: 27.02.2011

Студворк — интернет-сервис помощи студентам

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
<LINK REL=STYLESHEET TYPE="text/css" HREF="1.css">
 
 
<TABLE cellpadding="100" BORDER=1 COLS=1 BGCOLOR=white align=center>
 <H1>
 
 <TR>
  <TD width="30%">  1    <TR>2<TR/>      </TD><TD> 3</TD>
 </TR>
<H1/>
</TABLE>
 
 
 
 
 
<html/>

не получаются ячейки

@etalord · 23.12.2012, 11:58

Во-первых, неправильно так использовать тег <H1> в таблице. Его можно вставлять непосредственно в ячейку (между <td></td>).

Вашу задачу можно реализовать двумя способами:
1) дробить ячейки в таблице
2) вставлять таблицы в таблицу

Вам какой способ предпочтительнее?

Добавлено через 21 минуту
Предположим, что первым

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<table border="1" width="700" cellpadding="5" cellspacing="0">
    <tr>
        <td colspan="4">1</td>
    </tr>
    <tr>
        <td>2</td>
        <td rowspan="2">3</td>
        <td rowspan="2">4</td>
        <td rowspan="2">5</td>
    </tr>
    <tr>
        <td>6</td>
    </tr>
    <tr>
        <td colspan="2">7</td>
        <td colspan="2">8</td>
    </tr>
    <tr>
        <td rowspan="2">9</td>
        <td colspan="2">10</td>
        <td rowspan="2">11</td>
    </tr>
    <tr>
        <td colspan="2">12</td>
    </tr>
</table>

@newJS · 23.12.2012, 20:54

etalord, не правильно во втором ряду правые ячейки, плохо но видно разницу
если кто проще предложит скрытие ряда-распорки, выкладвайте

CSS
1
2
3
4
.slyTaBlya {border-collapse:collapse;}
.slyTaBlya td {border:1px solid black; padding:5px; vertical-align:top;}
.hides div {height:0; overflow:hidden;}
.hides td {padding:0;}

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<table class="slyTaBlya"><tr>
<td colspan="8">0</td>
</tr><tr>
<td colspan="2">8</td>
<td rowspan="2" colspan="2">10</td>
<td rowspan="2" colspan="3">12</td>
<td rowspan="2">15</td>
</tr><tr>
<td colspan="2">16</td>
</tr><tr>
<td colspan="4">24</td>
<td colspan="4">28</td>
</tr><tr>
<td rowspan="2" colspan="2">32</td>
<td colspan="4">34</td>
<td rowspan="2" colspan="2">38</td>
</tr><tr>
<td colspan="4">42</td>
</tr><tr class="hides">
<td><div>48</div></td>
<td><div>49</div></td>
<td><div>50</div></td>
<td><div>51</div></td>
<td><div>52</div></td>
<td><div>53</div></td>
<td><div>54</div></td>
<td><div>55</div></td>
</tr></table>

@Antares-75 · 27.12.2012, 00:19

Вообще первый раз встречаю, чтобы rowspan и colspan был прописан вместе.
Насколько это правильно?

Сообщение от newJS

не правильно во втором ряду правые ячейки, плохо но видно разницу

Объясните точнее.

@newJS · 27.12.2012, 07:25

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

Сообщение от Antares-75

Вообще первый раз встречаю, чтобы rowspan и colspan был прописан вместе.
Насколько это правильно?

Это вопрос к валидатору. Скромно промолчит, значит можно, будет громко ругаться, значит нельзя.

Сообщение от newJS

если кто проще предложит скрытие ряда-распорки, выкладывайте

Вот так проще, дивы не нужны, класс вешаем на последний TR в таблице.

CSS
1
.conceal td {padding:0; line-height:0; border-top:hidden; overflow:hidden;}

@etalord · 27.12.2012, 07:59

Да нет же, на картинке чётко видно, что граница не совпадает, я просто не стал заморачиваться. Если бы ТС отписался и указал на сей факт - я бы предложил в ячейку таблицу вставить ) Но, мне кажется, тема не актуальна

Сообщение от Antares-75

Вообще первый раз встречаю, чтобы rowspan и colspan был прописан вместе.
Насколько это правильно?

Я надеюсь, меня за это не арестуют

@kalabuni · 27.12.2012, 11:08

краткое методическое пособие по написанию любых сложных таблиц см. здесь

@Antares-75 · 27.12.2012, 12:04

Сообщение от etalord

Я надеюсь, меня за это не арестуют

язвительный вы наш

На сколько хорошо это поймут браузеры?
Опера, например, похоже поняла. А остальные?
И по-моему, эта конструкция усложняет понимание структуры таблицы. Вдруг придется немного ее переделать, думаете это будет легко?

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

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

@kalabuni · 27.12.2012, 12:36

Сообщение от Antares-75

На сколько хорошо это поймут браузеры?

любые браузеры одновременное наличие и colspan, и rowspan в одной ячейке поймут правильно

Сообщение от Antares-75

И по-моему, эта конструкция усложняет понимание структуры таблицы.

ну надо именно такую таблицу... что тут поделаешь?

Сообщение от Antares-75

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

имхо, это типовое задание из "методички" по разделу "Форматирование таблиц с использованием атрибутов ячеек colspan и rowspan"
предлагаемое вами решение с использованием вложенных таблиц будет восприниматься как невыполнение задания

@etalord · 27.12.2012, 12:51

Сообщение от kalabuni

имхо, это типовое задание из "методички" по разделу "Форматирование таблиц с использованием атрибутов ячеек colspan и rowspan"
предлагаемое вами решение с использованием вложенных таблиц будет восприниматься как невыполнение задания

Также подумал

Вообще считаю тема не заслуживает столько внимания

"Как сделать таблицу?" - "Берешь и делаешь"

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11680&d=1772460536 Одним из. . .	Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	27.12.2012, 11:08
	краткое методическое пособие по написанию любых сложных таблиц см. здесь 0