Давно на смену табличной верстке пришли другие технологии, но иногда ее еще используют т.к. "под рукой нет простого и понятного примера замены".
Поэтому ниже простая демонстрация замены таблицы на flexbox.
Для начала пример обыкновенной таблицы:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | < table >
< tr >
< td >Left 1</ td >
< td >Center 1</ td >
< td >Right 1</ td >
</ tr >
< tr >
< td >Left 2</ td >
< td >Center 2</ td >
< td >Right 2</ td >
</ tr >
< tr >
< td >Left 3</ td >
< td >Center 3</ td >
< td >Right 3</ td >
</ tr >
</ table >
|

Пример таблицы с привычной для DIV'ов группировкой элементов
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 | < style type = "text/css" >
.soflex1
{
flex-direction: row;
display: flex;
justify-content: space-between;
}
</ style >
< div class = "soflex1" >
< div >
< div >Left 1</ div >
< div >Left 2</ div >
< div >Left 3</ div >
</ div >
< div >
< div >Center 1</ div >
< div >Center 2</ div >
< div >Center 3</ div >
</ div >
< div >
< div >Right 1</ div >
< div >Right 2</ div >
< div >Right 3</ div >
</ div >
</ div >
|
Пример таблицы с привычной для TABLE'ов группировкой элементов
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 | < style type = "text/css" >
.soflex2 > div
{
display: flex;
justify-content: space-between;
}
</ style >
< div class = "soflex2" >
< div >
< div >Left 1</ div >
< div >Center 1</ div >
< div >Right 1</ div >
</ div >
< div >
< div >Left 2</ div >
< div >Center 2</ div >
< div >Right 2</ div >
</ div >
< div >
< div >Left 3</ div >
< div >Center 3</ div >
< div >Right 3</ div >
</ div >
</ div >
|
Весь код разом (без justify-content: space-between;):
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 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 | <!DOCTYPE HTML>
< html lang = "ru" >
< head >
< meta charset = "UTF-8" >
< title ></ title >
< style type = "text/css" >
table td,
.soflex1 div div,
.soflex2 div div
{
border: 1px solid #a9a6a3;
padding: 3px;
}
.soflex1
{
flex-direction: row;
display: flex;
}
.soflex2 > div
{
display: flex;
}
</ style >
</ head >
< body >
< div id = "soTest" >
< table >
< tr >
< td >Left 1</ td >
< td >Center 1</ td >
< td >Right 1</ td >
</ tr >
< tr >
< td >Left 2</ td >
< td >Center 2</ td >
< td >Right 2</ td >
</ tr >
< tr >
< td >Left 3</ td >
< td >Center 3</ td >
< td >Right 3</ td >
</ tr >
</ table >
< hr />
< div class = "soflex1" >
< div >
< div >Left 1</ div >
< div >Left 2</ div >
< div >Left 3</ div >
</ div >
< div >
< div >Center 1</ div >
< div >Center 2</ div >
< div >Center 3</ div >
</ div >
< div >
< div >Right 1</ div >
< div >Right 2</ div >
< div >Right 3</ div >
</ div >
</ div >
< hr />
< div class = "soflex2" >
< div >
< div >Left 1</ div >
< div >Center 1</ div >
< div >Right 1</ div >
</ div >
< div >
< div >Left 2</ div >
< div >Center 2</ div >
< div >Right 2</ div >
</ div >
< div >
< div >Left 3</ div >
< div >Center 3</ div >
< div >Right 3</ div >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Бонус
Иногда нужно повлиять на отображение "колонок" в зависимости от ширины экрана:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .soflex 111
{
flex- direction : row;
display : flex;
justify- content : space-between;
}
@media only screen and ( max-width : 800px )
{
.soflex 111
{
flex- direction : column;
}
}
|