Как сделать таблицу в html. Почти стандартный режим

2. Свойство background="URL" - задает фоновой рисунок. Вместо URL должен быть написан адрес фонового изображения.

Пример

Преобразуется на странице в следующее:

В рассмотренном примере наше фоновое изображение находится в папке img (которая находится в той же директории, что и html-страница), а называется изображение fon.gif . Обратите внимание на то, что в теге мы добавили style="color:white;" . Поскольку фон почти черный, то для того, чтобы текст не слился с фоном, мы сделали текст белым.

3. Свойство bgcolor="цвет" - задает цвет фона таблицы. В качестве цвета можно выбрать любой из всей палитры (см. коды и названия html цветов)

4. Свойство border="число" - задает толщину рамки таблицы. В предыдущих примерах мы указывали border="1" , что означает толщина рамки - 1 пиксель.

5. Свойство bordercolor="цвет" - задает цвет рамки. Если border="0" , то рамки не будет и цвет рамки не будет иметь смысла.

6. Свойство cellpadding="число" - отступ от рамки до содержимого ячейки в пикселях.

7. Свойство cellspacing="число" - расстояние между ячейками в пикселях.

8. Свойство cols="число" - число столбцов. Если его не задать, то браузер сам определит число столбцов. Разница лишь в том, что указание этого параметра, скорее всего, ускорит загрузку таблицы.

9. Свойство frame="параметр" - как отображать границы вокруг таблицы. Может принимать следующие значения:

• void - не отрисовывать границы
• border - граница вокруг таблицы
• above - граница по верхнему краю таблицы
• below - граница снизу таблицы
• hsides - добавить только горизонтальные границы (сверху и снизу таблицы)
• vsides - рисовать только вертикальные границы (слева и справа от таблицы)
• rhs - граница только на правой стороне таблицы
• lhs - граница только на левой стороне таблицы

10. Свойство height="число" - задает высоту таблицы: либо в пикселях, либо в процентах.

11. Свойство rules="параметр" - где отображать границы между ячейками. Может принимать следующие значения:

• all - линия рисуется вокруг каждой ячейки таблицы
• groups - линия отображается между группами, которые образуются тегами , , , или
• cols - линия отображается между колонками
• none - все границы скрываются
• rows - граница рисуется между строками таблицы, созданными через тег

1. Свойство align="параметр" - задает выравнивание отдельной ячейки таблицы. Может принимать следующие значения:

• left - выравнивание по левому краю
• center - выравнивание по центру
• right - выравнивание по правому краю

2. Свойство background="URL" - задает фоновое изображение ячейки. Вместо URL должен быть написан адрес фонового изображения.

3. Свойство bgcolor="цвет" - задает цвет фона ячейки.

4. Свойство bordercolor="цвет" - задает цвет рамки ячейки.

5. Свойство char="буква" - задает букву, от которой нужно сделать выравнивание. Значение атрибута align должно быть установлено как char.

6. Свойство colspan="число" - задает число объединяемых горизонтальных ячеек.

7. Свойство height="число" - задает высоту таблицы: либо в пикселях, либо в процентах %.

8. Свойство width="число" - задает ширину таблицы: либо в пикселях, либо в процентах %.

9. Свойство rowspan="число" - задает число объединяемых вертикальных ячеек.

10. Свойство valign="параметр" - выравнивание содержимого ячейки по вертикали.

• top - выравнивание содержимого ячейки по верхнему краю строки
• middle - выравнивание по середине
• bottom - выравнивание по нижнему краю
• baseline - выравнивание по базовой линии

Для тега

В случае использования border (граница ячеек) и нулевых отступов между ячейками, они все равно склеиваются и получается удвоенный border . Чтобы это избежать нужно прописать в стилях таблице border-collapse: collapse :

Уважаемый читатель, теперь Вы узнали гораздо больше о html теге table. Теперь советую перейти к следующему уроку.

Инструкция

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

- колонка. Основные дополнительные атрибуты: Border – граница; Bordercolor – цвет рамки; Width – ширина; Height – высота. Синтаксис таблицы 2X2 без рамки и левосторонним/правосторонним выравниванием содержимого: Содержимое 1-й ячейки Содержимое 2-й ячейки Содержимое 3-й ячейки Содержимое 4-й ячейки Картинку нужно прописывать после тега

. Если вставить изображение в первую ячейку таблицы, представленной выше, то получится: Содержимое 2-й ячейки Содержимое 3-й ячейки Содержимое 4-й ячейки Дополнительные атрибуты: Width – ширина; Height – высота; Alt - альтернативный текст, который будет отображаться у пользователя, если у него отключена функция просмотра картинок; Align – выравнивание по горизонтали; Valign – выравнивание по вертикали; Title – подпись к изображению. Использовать изображение можно в качестве ссылки. Для этого его достаточно облачить в соответствующий тег: В контексте таблицы это будет выглядеть так: Содержимое 2-й ячейки Содержимое 3-й ячейки Содержимое 4-й ячейки Дополнительные возможности изображений. 1. Смена картинки на цвет при наведении на нее мышью и после смены местоположения курсора: onMouseOver="this.style.background="#номер цвета"" onMouseOut="this.style.background="#номер цвета"" 2. Смена картинки на другое изображение при наведении мышью: onmouseover="this.src="images/1.gif"" onmouseout="this.src="images/2.gif"" 3. Вставка вращающейся карусели из картинок в ячейку таблицы (значения можно менять):

// 7 variables to control behavior var Car_Image_Width=100; var Car_Image_Height=100; var Car_Border=true; // true or false var Car_Border_Color="000000"; Border="0" var Car_Speed=5; var Car_Direction=true; // true or false var Car_NoOfSides=6; // must be 4, 6, 8 or 12 /* array to specify images and optional links. For 4 sided carousel specify at least 2 images For 6 sided carousel specify at least 3 For 8 sided carousel specify at least 4 For 12 sided carousel specify at least 6 If Link is not needed keep it "" */ Car_Image_Sources=new Array( "images/1.gif","", "images/2.gif","", "images/3.gif","", "images/4.gif","", "images/5.gif","", "images/6.gif","" // NOTE No comma after last line ); /***************** DO NOT EDIT BELOW **********************************/ CW_I=new Array(Car_NoOfSides/2+1);C_ClcW=new Array(Car_NoOfSides/2); C_Coef=new Array( 3*Math.PI/2,0,3*Math.PI/2,11*Math.PI/6,Math.PI/6,3*Math.PI/2,7*Math.PI/4, 0, Math.PI/4,3*Math.PI/2,5*Math.PI/3,11*Math.PI/6,0,Math.PI/6,Math.PI/3); var C_CoefOf=Car_NoOfSides==4?0:Car_NoOfSides==6?2:Car_NoOfSides==8?5:9; C_Pre_Img=new Array(Car_Image_Sources.length); var C_Angle=Car_Direction?Math.PI/(Car_NoOfSides/2):0,C_CrImg=Car_NoOfSides,C_MaxW,C_TotalW, C_Stppd=false,i,C_LeftOffset,C_HalfNo=Car_NoOfSides/2; Function Carousel(){ if(document.getElementById){ for(i=0;i Похожие публикации Как отключить уведомления для любого приложения на Android Правила построения HTML-документов Как сделать переходник sata на usb для жесткого диска своими руками Lenovo P780: прошивка радиомодуля Прошивка модуля связи неизвестно как исправить