Як вставити картинку в html таблицю

Як вставити картинку в html таблицю

Мова html не досконалий і має ряд істотних недоліків. Для того щоб прив’язати картинку до певного місця сторінки, краще для цього вставити її за допомогою таблиці. У цьому випадку зображення буде вважатися фоном і поверх його можна помістити текст.

Інструкція

  1. Спочатку необхідно створити таблицю, якщо її ще немає. Це дія відбувається в атрибуті. Для цього використовуються теги (що закриває тег обов’язковий):

    • <table> — таблиця;

    • <tr> — рядок;

    • <td> — колонка.

    Основні додаткові атрибути:

    • Border — кордон;

    • Align — вирівнювання по горизонталі;

    • Valign — вирівнювання по вертикалі;

    • Bordercolor — колір рамки;

    • Width — ширина;

    • Height — висота.

    Синтаксис таблиці 2X2 без рамки і лівостороннім / правостороннім вирівнюванням вмісту:

    <table border= «0″>

    <tr align=»left»>

    <td> Вміст 1-й осередку </ td>

    <td> Вміст 2-й осередку </ td> </ tr>

    <tr align=»right»>

    <td> вміст 3-й осередку </ td>

    <td> Вміст 4-й осередку </ td> </ tr>

    </ Table>
  2. Картинку треба прописувати після тега. Якщо вставити зображення в першу клітинку таблиці, представленої вище, то вийде:

    <table border= «0″>

    <tr align=»left»>

    <td> <img src=»адрес картинки у форматі gif, png, jpeg»> </ td>

    <td> Вміст 2-й осередку </ td> </ tr>

    <tr align=»right»>

    <td> вміст 3-й осередку </ td>

    <td> Вміст 4-й осередку </ td> </ tr>

    </ Table>

    Додаткові атрибути:

    • Width — ширина;

    • Height — висота;

    • Alt — альтернативний текст, який буде відображатися у користувача, якщо у нього відключена функція перегляду картинок;

    • Align — вирівнювання по горизонталі;

    • Valign — вирівнювання по вертикалі;

    • Title — підпис до зображення.
  3. Використовувати зображення можна в якості посилання. Для цього його достатньо вдягнути у відповідний тег:

    У контексті таблиці це виглядатиме так:

    <table border= «0″>

    <tr align=»left»>

    <td> <a href=»stranitsa.html»> <img src=»kartinka.png»> </ a> </ td>

    <td> Вміст 2-й осередку </ td> </ tr>

    <tr align=»right»>

    <td> вміст 3-й осередку </ td>

    <td> Вміст 4-й осередку </ td> </ tr>

    </ Table>
  4. Додаткові можливості зображень.

    1. Зміна картинки на колір при наведенні на неї мишею і після зміни місця розташування курсору:

    onMouseOver = «this.style.background = ‘# номер кольору’» onMouseOut = «this.style.background = ‘# номер кольору’»

    2. Зміна картинки на інше зображення при наведенні мишкою:

    onmouseover = «this.src = ‘images/1.gif’» onmouseout = «this.src = ‘images/2.gif’»

    3. Вставка обертається каруселі з картинок в клітинку таблиці (значення можна змінювати):

    <td align=»left»>

    <BODY Onload=»Carousel()» background=>

    <script type=»text/javascript»>

    / / 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 <Car_Image_Sources.length; i + = 2) {

    C_Pre_Img [i] = new Image (); C_Pre_Img [i]. Src = Car_Image_Sources [i]}

    C_MaxW = Car_Image_Width / Math.sin (Math.PI / Car_NoOfSides) + C_HalfNo +1;

    Car_Div = document.getElementById («Carousel»);

    for (i = 0; i <C_HalfNo; i + +) {

    CW_I [i] = document.createElement («img»); Car_Div.appendChild (CW_I [i]);

    CW_I [i]. Style.position = «absolute»;

    CW_I [i]. Style.top = 0 + «px»;

    CW_I [i]. Style.height = Car_Image_Height + «px»;

    if (Car_Border) {

    CW_I [i]. Style.borderStyle = «solid»;

    CW_I [i]. Style.borderWidth = 1 + «px»;

    CW_I [i]. Style.borderColor = Car_Border_Color}

    CW_I [i]. Src = Car_Image_Sources [2 * i];

    CW_I [i]. Lnk = Car_Image_Sources [2 * i +1];

    CW_I [i]. Onclick = C_LdLnk;

    CW_I [i]. Onmouseover = C_Stp;

    CW_I [i]. Onmouseout = C_Rstrt}

    CarImages ()}}

    function CarImages () {

    if (! C_Stppd) {

    C_TotalW = 0;

    for (i = 0; i <C_HalfNo; i + +) {

    C_ClcW [i] = Math.round (Math.cos (Math.abs (C_Coef [C_CoefOf + i] + C_Angle)) * Car_Image_Width);

    C_TotalW + = C_ClcW [i]}

    C_LeftOffset = (C_MaxW-C_TotalW) / 2;

    for (i = 0; i <C_HalfNo; i + +) {

    CW_I [i]. Style.left = C_LeftOffset + «px»;

    CW_I [i]. Style.width = C_ClcW [i] + «px»;

    C_LeftOffset + = C_ClcW [i]}

    C_Angle + = Car_Speed/720 * Math.PI * (Car_Direction? -1:1);

    if ((Car_Direction & & C_Angle <= 0 )||(! Car_Direction & & C_Angle> = Math.PI / C_HalfNo)) {

    if (C_CrImg == Car_Image_Sources.length) C_CrImg = 0;

    if (Car_Direction) {

    CW_I [C_HalfNo] = CW_I [0];

    for (i = 0; i <C_HalfNo; i + +) CW_I [i] = CW_I [i +1];

    CW_I [C_HalfNo-1]. Src = Car_Image_Sources [C_CrImg];

    CW_I [C_HalfNo-1]. Lnk = Car_Image_Sources [C_CrImg +1]}

    else {for (i = C_HalfNo; i> 0; i -) CW_I [i] = CW_I [i-1];

    CW_I [0] = CW_I [C_HalfNo];

    CW_I [0]. Src = Car_Image_Sources [C_CrImg];

    CW_I [0]. Lnk = Car_Image_Sources [C_CrImg +1]}

    C_Angle = Car_Direction? Math.PI / C_HalfNo: 0; C_CrImg + = 2}}

    setTimeout («CarImages ()», 50)}

    function C_LdLnk () {if (this.lnk) window.location.href = this.lnk}

    function C_Stp () {this.style.cursor = this.lnk? «pointer»: «default»; C_Stppd = true;}

    function C_Rstrt () {C_Stppd = false}

    </ Script> <div id=»Carousel» style=»position:relative; width:130; height:21″>

     </ Td>