martineden
7 лет назад[ Помогаем новичкам ] Уроки markdown. Верстка таблиц на примере 2-х, 3-х, 4-х колонок.
1. Таблица из двух колонок.
| Первый заголовок | Второй заголовок |
|---|---|
| Первый ряд первой колонки | Первый ряд второй колонки |
| Второй ряд первой колонки | Второй ряд второй колонки |
| - | - |
| - | - |
| N-ый ряд первой колонки | N-ый ряд второй колонки |
Код markdown:
Первый заголовок | Второй заголовок
------------ | -------------
Первый ряд первой колонки | Первый ряд второй колонки
Второй ряд первой колонки | Второй ряд второй колонки
-|-
-|-
N-ый ряд первой колонки|N-ый ряд второй колонки
2. Таблица из двух колонок. Текст в колонке с переносом строки
| Первый заголовок | Второй заголовок |
|---|---|
| Первый ряд первой колонки | Первый ряд второй колонки с переносом строки |
| Второй ряд первой колонки | Второй ряд второй колонки |
| - | - |
| - | - |
| N-ый ряд первой колонки | N-ый ряд второй колонки |
Код markdown:
Первый заголовок | Второй заголовок
------------ | -------------
Первый ряд первой колонки | Первый ряд второй колонки<br>с переносом строки
Второй ряд первой колонки | Второй ряд второй колонки
-|-
-|-
N-ый ряд первой колонки|N-ый ряд второй колонки
Примечание: Перенос строки осуществляется при помощи добавления в место переноса специального тега <br />.
3. Таблица из двух колонок. Текст отцентрирован.
Код markdown:
<center>Первый заголовок</center> | <center>Второй заголовок</center>
------------ | -------------
<center>Первый ряд первой колонки </center> | <center>Первый ряд второй колонки </center>
<center>Второй ряд первой колонки</center> | <center>Второй ряд второй колонки</center>
<center>-</center>|<center>-</center>
<center>-</center>|<center>-</center>
<center>N-ый ряд второй колонки</center>|<center>N-ый ряд второй колонки</center>
Примечание: Для центрирования текста применен тег <center>. Для центрирования необходимо заключить содержимое между <center> и </center>.
4. Таблица из двух колонок. Текст второй колонки прижат к правом углу.
| Первый заголовок | Второй заголовок |
|---|---|
| Первый ряд первой колонки | Первый ряд второй колонки |
| Второй ряд первой колонки | Второй ряд второй колонки |
| - | - |
| - | - |
| N-ый ряд первой колонки | N-ый ряд второй колонки |
Код markdown:
Первый заголовок | <div class="text-right">Второй заголовок</div>
------------ | -------------
Первый ряд первой колонки | <div class="text-right">Первый ряд второй колонки</div>
Второй ряд первой колонки | <div class="text-right">Второй ряд второй колонки</div>
-|<div class="text-right">-</div>
-|<div class="text-right">-</div>
N-ый ряд первой колонки|<div class="text-right">N-ый ряд второй колонки</div>
Примечание: Для такого форматирования текста применен класс "text-right". Чтобы сделать такое выравние необходимо заключить содержимое между <div class="text-right"> и </div>:
5. Таблица из двух колонок. Выключка по формату.
| Первый заголовок | Второй заголовок |
|---|---|
Первый ряд первой колонки (выключка по формату) | Первый ряд второй колонки (выключка по формату) |
Второй ряд первой колонки (выключка по формату) | Второй ряд второй колонки (выключка по формату) |
| - | - |
| - | - |
N-ый ряд первой колонки (выключка по формату) | N-ый ряд первой колонки (выключка по формату) |
Код markdown:
Первый заголовок | Второй заголовок
------------ | -------------
<div class="text-justify">Первый ряд первой колонки (выключка по формату)</div> | <div class="text-justify">Первый ряд второй колонки (выключка по формату)</div>
<div class="text-justify">Второй ряд первой колонки (выключка по формату)</div> | <div class="text-justify">Второй ряд второй колонки (выключка по формату)</div>
-|-
-|-
<div class="text-justify">N-ый ряд первой колонки (выключка по формату)</div> | <div class="text-justify">N-ый ряд первой колонки (выключка по формату)</div>
Примечание: Для такого форматирования текста применен класс "text-justify". Чтобы сделать такое выравние необходимо заключить содержимое между <div class="text-justify"> и </div>:
Важное замечание: Выключка по формату не работает для первого заголовка!
6. Таблица из трех колонок.
| Первый заголовок | Второй заголовок | Третий заголовок |
|---|---|---|
| Первый ряд первой колонки | Первый ряд второй колонки | Первый ряд третьей колонки |
| Второй ряд первой колонки | Второй ряд второй колонки | Второй ряд третьей колонки |
| - | - | - |
| - | - | - |
| N-ый ряд первой колонки | N-ый ряд второй колонки | N-ый ряд третьей колонки |
Код markdown:
Первый заголовок | Второй заголовок | Третий заголовок
------------ | ------------- | -------------
Первый ряд первой колонки | Первый ряд второй колонки | Первый ряд третьей колонки
Второй ряд первой колонки | Второй ряд второй колонки | Второй ряд третьей колонки
-|-|-
-|-|-
N-ый ряд первой колонки|N-ый ряд второй колонки| N-ый ряд третьей колонки
7. Таблица из четырех колонок.
| Первый заголовок | Второй заголовок | Третий заголовок | Четвертый заголовок |
|---|---|---|---|
| Первый ряд первой колонки | Первый ряд второй колонки | Первый ряд третьей колонки | Первый ряд четвертой колонки |
| Второй ряд первой колонки | Второй ряд второй колонки | Второй ряд третьей колонки | Второй ряд четвертой колонки |
| - | - | - | - |
| - | - | - | - |
| N-ый ряд первой колонки | N-ый ряд второй колонки | N-ый ряд третьей колонки | N-ый ряд четвертой колонки |
Код markdown:
Первый заголовок | Второй заголовок | Третий заголовок | Четвертый заголовок
------------ | ------------- | ------------- | -------------
Первый ряд первой колонки | Первый ряд второй колонки | Первый ряд третьей колонки | Первый ряд четвертой колонки
Второй ряд первой колонки | Второй ряд второй колонки | Второй ряд третьей колонки | Второй ряд четвертой колонки
-|-|-|-
-|-|-|-
N-ый ряд первой колонки|N-ый ряд второй колонки| N-ый ряд третьей колонки|N-ый ряд четвертой колонки
Примечание: Текст может быть любой длины, главное, чтобы колонки разделялись значком "|" (shift+\ в англ.раскладке).