Атрибуты тега TABLE, бордюры, размеры и другие.

В этой главе мы поговорим об атрибутах тега table.

summary- этот атрибут определяет общую информацию о назначении и структуре таблицы для не визуальных(речевых) браузеров, т.е. предостовляет краткую информацию о содержимом таблицы. На первый взгляд кажется что для новичков этот атрибут не обязателен, но это не так, валидатор выдает предупреждение об его отсутствии, так что ставте его хотя бы пустым summary="".

    <table summary="Краткая
                          информация
                          о таблице.">
      <tr>
         <td> первый ряд, первая ячейка </td>
         <td> первый ряд, вторая ячейка </td>
      </tr>
    </table>

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

border- этот атрибут задает толщину бордюра вокруг таблицы как и в картинках в пикселях.

    <table border="5">
      <tr>
         <td> первый ряд, первая ячейка </td>
         <td> первый ряд, вторая ячейка </td>
      </tr>
    </table>
первый ряд, первая ячейка первый ряд, вторая ячейка

если значение этого атрибута больше ноля то можно(но не желательно) вставить еще один атрибут bordercolor="#FFAA00" с цветом бордюра.

align - это атрибут служит для выравнивания таблицы и может принимать одно из этих значений:left или center или right.

height задает высоту таблицы в пикселях. Этот атрибут задается только в тех случаях если нам необходимы установить конкретную высоту.

width - задает ширину таблицы в пикселях или в процентах относительно ширины окна браузера.

cellspacing - задает расстояние между ячейками в пикселях

    <table border="5" cellspacing="10">
      <tr>
         <td> первый ряд, первая ячейка </td>
         <td> первый ряд, вторая ячейка </td>
      </tr>
    </table>
первый ряд, первая ячейка первый ряд, вторая ячейка

cellpadding задает расстояние между ячейкой и ее содержимым:

    <table border="5" cellspacing="10"cellpadding="10">
      <tr>
         <td> первый ряд, первая ячейка </td>
         <td> первый ряд, вторая ячейка </td>
      </tr>
    </table>

bgcolor как и в теге body задает цвет для таблицы.

background делает картинку фоном таблицы как и теге body.

Создадим страницу table.html :

        <html>
        <head>
        <title>таблицы в хтмл</title>
        </head>
        <body>
        <table border="1"  width="800" height="500" bgcolor="#0000FF">
         <tr>
               <td> первый ряд, первая ячейка </td>
               <td> первый ряд, вторая ячейка </td>
         </tr>
         <tr>
           <td> второй ряд, первая ячейка </td>
           <td> второй ряд, вторая ячейка </td>
         </tr>
        </table>        
        </body>
        </html>

А теперь просмотрим(откроется в новой вкладке) что у нас получилось.
Этим примером хотел обратить ваше внимание на то что если мы задаем размер таблице то ячейки делят этот размер поровну. А так-же обратите внимание что текст у нас застрял по центру... Не порядок!!!

valign- этот атрибут служит для вертикального выравнивания содержимого ячейки и может принимать следующие занчения:
valign="middle" текст расположен по центру, можно не задавать т.к. это значение по умолчанию.
valign="top" текст расположен вверху ячейки.
valign="bottom" текст расположен внизу ячейки.
Домашнее задание: самостоятельно подставить атрибуты valign, cellpadding и cellspacing с разными значениями в файле table.html.

Смотрите также: