WOO logo

Wizard рекомендует

На этой странице

Рекомендации по форматированию

Введение

  • Не заключайте теги <table> или <h2> в теги <p> или <div> .

  • Больше не используйте теги <center>...</center> . Чтобы центрировать элемент, используйте <div align="center">...</div> .

  • Больше не используйте теги <b>...</b> . Для выделения текста используйте теги <strong>...</strong> .

  • Больше не используйте теги <i>...</i> . Для выделения текста курсивом используйте <em>...</em> .

  • Теги <p>...</p> используются только для выделения текста, в остальном не содержащего тегов.

  • При добавлении изображения внутри ссылки на увеличенную версию этого изображения используйте <a class="trans" ... ><img ... ></a> .

  • Чтобы добавить заголовок раздела:

    <h2>Название заголовка</h2>

  • Чтобы добавить изображение, смещенное вправо:

    <div class="image--right"><img src="..." /></div>

  • Чтобы добавить поле для форматирования примеров кода (как показано на этой странице):
    <pre>
	Пример кода здесь.
</pre>
  • Чтобы добавить узкую таблицу данных шириной 50%:
    <div class="box desk-50percent">
  <h3 class="box-title">Заголовок таблицы</h3><!--/box-title-->
  <div class="box-content">
	<table class="data" cellspacing="0" cellpadding="0" border="0">
	<tr>
		<th class="data-heading">Заголовок столбца 1</th>
		<th class="data-heading">Заголовок столбца 2</th>
	</tr>
	<tr>
		<td class="left_aligned">Левая</td>
		<td>Строка 1, Столбец 2</td>
	</tr>
	<tr>
		<td class="right_aligned">Правый</td>
		<td>Строка 1, Столбец 2</td>
	</tr>
	<tr>
		<td class="centered">Центр</td>
		<td>Строка 3, столбец 2</td>
	</tr>
	</table>
  </div><!--/box-content-->
</div><!--/box-->

    Приведённый выше код создаст следующую центрированную таблицу:

    Заголовок таблицы

    Заголовок колонки 1 Заголовок колонки 2
    Левый Строка 1, Столбец 2
    Верно Строка 1, Столбец 2
    Центр Строка 3, столбец 2
  • Чтобы добавить таблицу данных шириной 75%:
    <div class="box desk-75percent">
  <h3 class="box-title">Заголовок таблицы</h3><!--/box-title-->
  <div class="box-content">
	<table class="data" cellspacing="0" cellpadding="0" border="0">
	<tr>
		<th class="data-heading">Заголовок столбца 1</th>
		<th class="data-heading">Заголовок столбца 2</th>
	</tr>
	<tr>
		<td class="left_aligned">Левая</td>
		<td>Строка 1, Столбец 2</td>
	</tr>
	<tr>
		<td class="right_aligned">Правый</td>
		<td>Строка 1, Столбец 2</td>
	</tr>
	<tr>
		<td class="centered">Центр</td>
		<td>Строка 3, столбец 2</td>
	</tr>
	</table>
  </div><!--/box-content-->
</div><!--/box-->

    Приведённый выше код создаст следующую центрированную таблицу:

    Заголовок таблицы

    Заголовок колонки 1 Заголовок колонки 2
    Левый Строка 1, Столбец 2
    Верно Строка 1, Столбец 2
    Центр Строка 3, столбец 2
  • Чтобы добавить стандартную таблицу данных шириной 100%:
    <div class="box">
  <h3 class="box-title">Заголовок таблицы</h3><!--/box-title-->
  <div class="box-content">
	<table class="data" cellspacing="0" cellpadding="0" border="0">
	<tr>
		<th class="data-heading">Заголовок столбца 1</th>
		<th class="data-heading">Заголовок столбца 2</th>
		<th class="data-heading">Заголовок столбца 3</th>
	</tr>
	<tr>
		<td class="left_aligned">Левая</td>
		<td>Строка 1, Столбец 2</td>
		<td>Строка 1, Столбец 3</td>
	</tr>
	<tr>
		<td class="right_aligned">Правый</td>
		<td>Строка 1, Столбец 2</td>
		<td>Строка 1, Столбец 3</td>
	</tr>
	<tr>
		<td class="centered">Центр</td>
		<td>Строка 3, столбец 2</td>
		<td>Строка 3, Столбец 3</td>
	</tr>
	</table>
  </div><!--/box-content-->
</div><!--/box-->

    Приведённый выше код создаст следующую центрированную таблицу:

    Заголовок таблицы

    Заголовок колонки 1 Заголовок колонки 2 Заголовок колонки 3
    Левый Строка 1, Столбец 2 Строка 1, Столбец 3
    Верно Строка 1, Столбец 2 Строка 1, Столбец 3
    Центр Строка 3, столбец 2 Строка 3, столбец 3
  • Чтобы добавить большую таблицу данных:
    <div class="box box--expandable">
  <h3 class="box-title">Заголовок таблицы<span class="box-title-expand desk-visible">Развернуть <i class="fa-regular fa-arrow-right-long"></i></span></h3><!--/box-title-->
  <div class="box-content">
	<table class="data" cellspacing="0" cellpadding="0" border="0">
	<tr>
		<th class="data-heading">Заголовок столбца 1</th>
		<th class="data-heading">Заголовок столбца 2</th>
		<th class="data-heading">Заголовок столбца 3</th>
	</tr>
	<tr>
		<td class="left_aligned">Левая</td>
		<td>Строка 1, Столбец 2</td>
		<td>Строка 1, Столбец 3</td>
	</tr>
	<tr>
		<td class="right_aligned">Правый</td>
		<td>Строка 1, Столбец 2</td>
		<td>Строка 1, Столбец 3</td>
	</tr>
	<tr>
		<td class="centered">Центр</td>
		<td>Строка 3, столбец 2</td>
		<td>Строка 3, Столбец 3</td>
	</tr>
	</table>
  </div><!--/box-content-->
</div><!--/box-->

    Приведённый выше код создаст следующую центрированную таблицу:

    Развернуть заголовок таблицы

    Заголовок колонки 1 Заголовок колонки 2 Заголовок колонки 3
    Левый Строка 1, Столбец 2 Строка 1, Столбец 3
    Верно Строка 1, Столбец 2 Строка 1, Столбец 3
    Центр Строка 3, столбец 2 Строка 3, столбец 3
  • Чтобы добавить очень большую таблицу данных:
    <div class="box box--expandable">
  <h3 class="box-title">Заголовок таблицы<span class="box-title-expand desk-visible">Развернуть <i class="fa-regular fa-arrow-right-long"></i></span></h3><!--/box-title-->
  <div class="box-content">
	<table class="data" cellspacing="0" cellpadding="0" border="0">
	<tr>
		<th class="data-heading">Заголовок столбца 1</th>
		<th class="data-heading">Заголовок столбца 2</th>
		<th class="data-heading">Заголовок столбца 3</th>
	</tr>
	<tr>
		<td class="left_aligned">Левая</td>
		<td>Строка 1, Столбец 2</td>
		<td>Строка 1, Столбец 3</td>
	</tr>
	<tr>
		<td class="right_aligned">Правый</td>
		<td>Строка 1, Столбец 2</td>
		<td>Строка 1, Столбец 3</td>
	</tr>
	<tr>
		<td class="centered">Центр</td>
		<td>Строка 3, столбец 2</td>
		<td>Строка 3, Столбец 3</td>
	</tr>
	</table>
  </div><!--/box-content-->
</div><!--/box-->

    Приведённый выше код создаст следующую центрированную таблицу:

    Развернуть заголовок таблицы

    Заголовок колонки 1 Заголовок колонки 2 Заголовок колонки 3
    Левый Строка 1, Столбец 2 Строка 1, Столбец 3
    Верно Строка 1, Столбец 2 Строка 1, Столбец 3
    Центр Строка 3, столбец 2 Строка 3, столбец 3

    Обратите внимание на названия классов для выравнивания заголовка таблицы (th) или ячейки таблицы (td):

    • class="left_aligned" to left-align
    • class="right_aligned" для выравнивания по правому краю
    • class="centered" для выравнивания по центру

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

Автор: Michael Shackleford