Нестандартная таблица средствами HTML

@СергейСереб · Регистрация: 19.09.2016

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

Можно вот такую табличку создать средствами HTML? не div

Dmitry · 30.11.2016, 22:35

@СергейСереб · 30.11.2016, 22:46 **[ТС]**

Этот аттрибут я знаю. Уже пробовал. Поэтому и пишу.
Вот что получается:
Название: 2016-11-30_2142.png
Просмотров: 19

Размер: 894 байт

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
<table class="galery">
    <tr>
    <td>
    text
    </td>
    <td colspan="2">
    texttext
    </td>
    <td>
    text
    </td>
    </tr>
    <tr>
    <td colspan="2">
    texttext
    </td>
    <td>
    text
    </td>
    <td>
    text
    </td>
    </tr>
    </table>

CSS
1
2
3
4
table, td {
  border: 1px solid black;
  border-collapse:collapse;
}

Dmitry · 30.11.2016, 23:08

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
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
table {border-collapse: collapse;width:90%;}
td {border: 1px solid grey; text-align: center;}
td.empty {border: none; width:33%; height: 1px;}
</style>
</head>
<body>
<table class="galery">
    <tr>
    <td class="empty"></td>
    <td class="empty">&nbsp;</td>
    <td  class="empty">&nbsp;</td>
    </tr>
    <tr>
    <td>
    text1
    </td>
    <td colspan="2">
    text2
    </td>
    </tr>
    <tr>
    <td colspan="2">
    text3
    </td>
    <td>
    text4
    </td>
    </tr>
    </table>
 
</body>
</html>

http://www.w3schools.com/code/... ARZ2CAUCRB

@СергейСереб · 30.11.2016, 23:22 **[ТС]**

Dmitry, Почему в строке 14 нет пробела, а в остальных двух ячейках(сторки 15,16) есть?
В строке 8 наверное должно быть line-hight вместо height?
И что это за приемчик такой? Откуда Вы его взяли? Я вижу, что работает, но не понимаю как. Как к этому пришли? Откуда у этого метода растут ноги? И много еще есть таких неочевидных приемов в HTML? Откуда их можно почерпнуть?

Dmitry · 30.11.2016, 23:24

Сообщение от СергейСереб

Почему в строке 14 нет пробела, а в остальных двух ячейках есть?

забыл

Сообщение от СергейСереб

В строке 8 наверное должно быть line-hight?

наверное да.

Сообщение от СергейСереб

И что это за приемчик такой? Откуда Вы его взяли?

Придумалось

@mrtoxas · 30.11.2016, 23:27

До кучи

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <style>
    table {
      table-layout: fixed;
      border-collapse: collapse;
      border-spacing: 0;
      width: 300px;
      border: 1px solid black;
    }    
    td {
      border-top: 1px solid black;
      border-left: 1px solid black;
      border-right: 1px solid black;
      padding: 10px;
    }    
    .hidden td {
      border: 0;
      height: 0;
      padding: 0 10px;
    }
  </style>
</head>
 
<body>
  <table>
    <tr>
      <td colspan="2">1</td>
      <td>2</td>
    </tr>
    <tr class="hidden">
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>3</td>
      <td colspan="2">4</td>
    </tr>
  </table>
</body>
 
</html>

@СергейСереб · 30.11.2016, 23:48 **[ТС]**

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

До кучи

...
Все по отдельности знакомо, как это все вместе работает не понятно....Что это за скрытая строка??? Ячеек две, но фактически колонок три... Можете объяснить пожалуйста, как это работает? Или где про это почитать можно?

@mrtoxas · 01.12.2016, 00:09

А нигде не почитать, потому что это "костыли", и они у нас, с Dmitry, совпали. А теперь правильный вариант:

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
29
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <style>
    table {
      table-layout: fixed;
      border-collapse: collapse;
      width: 300px;
    }
    td {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <table>
    <tr>
      <td colspan="2">1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
      <td colspan="2">4</td>
    </tr>
  </table>
</body>
</html>

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	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. На борту пять. . .

@СергейСереб 39 / 9 / 10 Регистрация: 19.09.2016 Сообщений: 1,076

	Нестандартная таблица средствами HTML 30.11.2016, 22:22. Показов 877. Ответов 8 Метки нет (Все метки) Можно вот такую табличку создать средствами HTML? не div 0

Dmitry 13440 / 7534 / 830 Регистрация: 09.09.2009 Сообщений: 29,554
	30.11.2016, 22:35
	http://htmlbook.ru/html/td/colspan 0

@СергейСереб 39 / 9 / 10 Регистрация: 19.09.2016 Сообщений: 1,076
	30.11.2016, 23:22 [ТС]
	Dmitry, Почему в строке 14 нет пробела, а в остальных двух ячейках(сторки 15,16) есть? В строке 8 наверное должно быть line-hight вместо height? И что это за приемчик такой? Откуда Вы его взяли? Я вижу, что работает, но не понимаю как. Как к этому пришли? Откуда у этого метода растут ноги? И много еще есть таких неочевидных приемов в HTML? Откуда их можно почерпнуть? 0