Верстаем таблицы на HTML и CSS

Простая табличка

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

Символ Мнемоника Шестнадцатеричный код Unicode Десятичный код Unicode Описание
< &lt; &#x003C; &#60; меньше
> &gt; &#x003E; &#62; больше
& &amp; &#x0026; &#38; амперсанд
&nbsp; &#x00A0; &#129; неразрывный пробел
&shy; &#x00AD; &#173; мягкий перенос
§ &sect; &#x00A7; &#167; параграф
© &copy; &#x00A9; &#169; знак охраны авторского права
° &deg; &#x00B0; &#176; градусы
&ndash; &#x0096; &#150; среднее тире
&mdash; &#x0097; &#151; длинное тире
± &plusmn; &#x00B1; &#177; плюс-минус

Таблица 1.1. Мнемоники и коды Юникода некоторых символов

Пример табличной верстки

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

Калькулятор перевода целых чисел A2-36 ⇄ B2-36 
   
🌴

Как видим таблицы можно использовать не только по прямому назначению, но и для разметки страницы. Раньше этот прием применялся повсеместно. Сейчас же вместо табличной верстки используется блочная верстка, в которой применяются в основном элементы 'div' и другие более современные средства.