Публикации с тегом "tables"

Выравнивание таблицы по центру

Если таблицу поместить в блок с CSS-стилем

text-align: center

то желаемого эффекта не произойдет. Многие для выравнивания таблицы по центру используют тег center. Это не самое лучшее решение, так как данный тег является устаревшим.

Выровнять таблицу по центру можно, поместив ее в блок со следующим CSS-стилем:

<div style="margin: 0 auto">
  <table> ... </table>
</div>

Таким же образом можно отцентрировать и блок внутри блока.

Стилизация таблиц (HTML + CSS)

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

  
  

Код таблицы:

<table border="1" width="200px">
  <tr><td>&nbsp;</td><td>&nbsp;</td></tr>
  <tr><td>&nbsp;</td><td>&nbsp;</td></tr>
</table>

Такое оформление подходит не всегда. Допустим, нам необходима таблица с зелеными границами ячеек. Попробуем указать стиль border для таблицы и ее ячеек:

<style>
  #ourtable, #ourtable td {border: 1px solid #070}
</style>
<table border="1" width="200px" id="ourtable">
  <tr><td>&nbsp;</td><td>&nbsp;</td></tr>
  <tr><td>&nbsp;</td><td>&nbsp;</td></tr>
</table>