Табличный дизайн Занятие 10
Структура описывающая таблицу состоит из следующих элементов Дескриптора <table >…</table > , внутри которого заключена вся таблица, этот дескриптор описывает параметр таблицы: Параметр <table cellspacing= > расстояние между ячейками, толщина разделительных перегородок между ячейками таблицы. Параметр <table cellpadding= > определяет пространство между границей и данными таблицы Параметр <table border= > - задает границу талицы. n n Дескриптора <tr>… </tr>, внутри которого заключены строки. Каждый такой дескриптор описывает параметры соответствующей строки.
Дескриптора <td>. . </td>, внутри которого заключено содержимое ячеек. Каждый такой дескриптор описывает параметры отдельной ячейки. <td nowrap> – параметр, запрещающий переход на новую строку <td></td> -пустая ячейка n Дескриптора <caption>…</ caption >- название таблицы. Его выравнивают при помощи параметра align, который принимает значения: left, right, center и valign со значениями bottom, top. <caption align= left valign = bottom >…</ caption > n Выполните задание карточка № 10. 1
Выравнивание Горизонтальное В дескрипторе <table >…</table > атрибут align отвечает за выравнивание таблицы относительно краев окна браузера. Этот параметр принимает значения: left, right, center. В дескрипторе <tr >…</tr > атрибут align отвечает за выравнивание ячеек. Этот параметр принимает значения: left, right, justify. В дескрипторе <td >…</td > атрибут align отвечает за выравнивание столбцов. Этот параметр принимает значения: left, right, justify. Однако сначала нужно сгруппировать ячейки, а затем описать общие для них параметры. n
n Вертикальное В дескрипторе <td >…</td > параметр valign отвечает за тикальное выравнивание относительно краев окна браузера. Этот параметр принимает значения: bottom, middle, top. Этот параметр можно использовать и для <tr>… </tr>, чтобы упростить работу и сократить код.
Размеры таблиц n Для того, чтобы изменить размер таблицы используют ограничители ширины: width и height в дескрипторе <table >…</table >. (размер указывать в процентах)
Размеры ячеек n <td width= >…</td > n <td height >…</td > Выполните задание карточка № 10. 2
Рамки n n n Если параметр border не указать, рамки не будет никакой. Если же <table border=5 bordercolor=green> то укажем и размер и цвет рамки. Благодаря разнице цветов верхней-левой и нижней-правой частей рамки создают эффект выпуклости. Для того чтобы этого избежать использую параметры –bordercolordark и bordercolorlight Выполните задание карточка № 10. 3
Частичное отображение рамок Параметр rules дескриптора <table> принимая значения none, отображает только внешнюю рамку таблицы, границы между ячейками становятся невидимыми. Если нужно, чтобы, кроме того, были видны еще и границы между строками, используем значение rows, а если между столбцами cols. Border должен быть не нулевой. Если же значене all, то border может быть и равен 0. n
При параметре frame Border не обязателен. Lhs рамка только слева от ячеек Rhs рамка только справа от ячеек Vsides по обеим сторонам Above горизонтальное разделение над ячейками Below горизонтальное разделение под ячейками Hsides горизонтальное разделение сверху и снизу ячеек Viod – (если Border не равен 0) становятся видны границы между ячейками. n
Фон ячеек и таблицы n И цвет фона и фоновое изображение могут быть предопределены как для отдельных строк и столбцов таблицы, так и для отдельных ячеек. Здесь следует учесть одну особенность: если фон, заданный для всей таблицы, заполняет и промежутки между ячейками, то фон, определенный для строк и ячеек заполняет толь внутреннюю часть. n <table border=5 bgcolor=#ffffff> <tr bgcolor=#808000 align=justify> n
Заголовки строк и столбцов n Дескриптора <th>. . </th> -текст в ячейке выделен жирным шрифтом и является заголовком. <table > <tr > <th> новости </th> <th> погода </th> </tr > </table >
Слияние ячеек Для слияния двух соседних ячеек в одной стоке используется параметр rowspan. <td rowspan=4> где цифра означает количество объединенных ячеек. n
Группировка ячеек.
Скачать презентацию Табличный дизайн Занятие 10 Структура описывающая таблицу
Табличный дизайн.ppt