Таблицы в html

Помечено: , ,

В этой теме 0 ответов, 1 участник, последнее обновление  Васильев Владимир Сергеевич 7 мес. назад.

  • Автор
    Сообщения
  • #3704

    Сегодня статья будет о том, как создается разметка при табличной верстке на различных сайтах. А именно как создавать таблицу на html и как сделать таблицу на html. Вообще для разметки таблицы на странице используется не так уж и много тегов. И вот они:

    • <table> – указывает на начало таблицы и ее конец (</table>)
    • <tr> - table row — указывает на начало строки (то есть ряда)
    • <td>table data — указывает на начало столбца

    Да, я знаю, что если вы еще не встречались с таблицами понять их по этим трем пунктам будет невозможно ;) Поэтому читаем дальше. Вот например чтобы сделать такую табличку:

    нам потребуется такой код:

    <html>
    <table>
      <tr>
        <td bgcolor="blue">1x1</td>
        <td bgcolor="orange">1x2</td>
        <td bgcolor="blue">1x3</td>
      </tr>
     
      <tr>
        <td bgcolor="blue">2x1</td>
        <td bgcolor="orange">2x2</td>
        <td bgcolor="blue">2x3</td>
      </tr>
    </table>
    </html>

    Итак, объяснения. Для начала задаем тегом

    начало таблицы. После чего внимание!

    Открываем первую строку в таблице с помощью тега <tr>. В нее мы можем добавлять все что угодно, в нашем случае это ТРИ столбца, которые мы добавили с помощью тегом <td>. Для каждого <td> мы можем задать отдельный цвет, как у нас к примеру, синие и оранжевые.

    В каждую ячейку (именно так называется раздел <td> который находится внутри <tr>) таблицы я написал координаты, и из кода вы можете легко их прочесть и понять как пишутся таблицы. Если вы хотите задать другой цвет полностью для целого ряда, то потребуется задавать параметры color не <td>, а <tr>.

    Главное хочу сказать, что при изучении html, нужно желание, нужно больше писать и разбирать чужие коды, и только тогда получится что-то изучить. Так же и здесь, вглядитесь в код таблички который я выложил и попробуйте еще раз досконально понять как это работает, рассмотреть координаты ячеек и т.д.

    Ну вот вроде и все. Вообще, честно сказать, тема не сложная вовсе, но очень важная и полезная.

Для ответа в этой теме необходимо авторизоваться.