ßê âñòàâèòè êàðòèíêó â html òàáëèöþ

³äåî - ßê ËÅÃÊÎ ³ ØÂÈÄÊÎ âñòàâèòè êàðòèíêó â áàçó äàíèõ Access

Ìîâà html íå äîñêîíàëèé ³ ìຠðÿä ³ñòîòíèõ íåäîë³ê³â. Äëÿ òîãî ùîá ïðèâ`ÿçàòè êàðòèíêó äî ïåâíîãî ì³ñöÿ ñòîð³íêè, êðàùå äëÿ öüîãî âñòàâèòè ¿¿ çà äîïîìîãîþ òàáëèö³. Ó öüîìó âèïàäêó çîáðàæåííÿ áóäå ââàæàòèñÿ ôîíîì ³ ïîâåðõ éîãî ìîæíà ïîì³ñòèòè òåêñò.

³äåî - Òàáëèö³ html. ßê ñòâîðèòè ³ íàëàøòóâàòè îñåðåäêè

²íñòðóêö³ÿ
1



Ñïî÷àòêó íåîáõ³äíî ñòâîðèòè òàáëèöþ, ÿêùî ¿¿ ùå íåìàº. Öÿ ä³ÿ â³äáóâàºòüñÿ â àòðèáóò³ . Äëÿ öüîãî âèêîðèñòîâóþòüñÿ òåãè (çàêðèâຠòåã îáîâ`ÿçêîâèé):
• - òàáë³öà-
• - ñòðîêà-
•
- êîëîíêà.

Îñíîâí³ äîäàòêîâ³ àòðèáóòè:
• Border - ãðàí³öà-
• Align - âèð³âíþâàííÿ ïî ãîð³çîíòàë³-
• Valign - âèð³âíþâàííÿ ïî âåðòèêàë³
• Bordercolor - êîë³ð ðàìê³-
• Width - øèðèíà
• Height - âèñîòà.

³äåî - 5. ßê âñòàâèòè êàðòèíêó â HTML

Ñèíòàêñèñ òàáëèö³ 2X2 áåç ðàìêè ³ ë³âîñòîðîíí³ì / ïðàâîñòîðîíí³ì âèð³âíþâàííÿì âì³ñòó:








Âì³ñò 1-é îñåðåäêè Âì³ñò 2-é îñåðåäêè
Âì³ñò 3-é îñåðåäêó Âì³ñò 4-é îñåðåäêè
2

³äåî - 5 ßê âñòàâèòè êàðòèíêó â HTML

Êàðòèíêó òðåáà ïðîïèñóâàòè ï³ñëÿ òåãà . ßêùî âñòàâèòè çîáðàæåííÿ â ïåðøó îñåðåäîê òàáëèö³, ïðåäñòàâëåíî¿ âèùå, òî âèéäå:



Âì³ñò 2-é îñåðåäêè

Âì³ñò 3-é îñåðåäêó
Âì³ñò 4-é îñåðåäêè


Äîäàòêîâ³ àòðèáóòè:
• Width - øèðèíà
• Height - âèñîòà-
• Alt - àëüòåðíàòèâíèé òåêñò, ÿêèé áóäå â³äîáðàæàòèñÿ ó êîðèñòóâà÷à, ÿêùî ó íüîãî â³äêëþ÷åíà ôóíêö³ÿ ïåðåãëÿäó êàðò³íîê-
• Align - âèð³âíþâàííÿ ïî ãîð³çîíòàë³-
• Valign - âèð³âíþâàííÿ ïî âåðòèêàë³
• Title - ï³äïèñ äî çîáðàæåííÿ.

3
Âèêîðèñòîâóâàòè çîáðàæåííÿ ìîæíà â ÿêîñò³ ïîñèëàííÿ. Äëÿ öüîãî éîãî äîñèòü âäÿãíóòè ó â³äïîâ³äíèé òåã:
 êîíòåêñò³ òàáëèö³ öå áóäå âèãëÿäàòè òàê:







Âì³ñò 2-é îñåðåäêè
Âì³ñò 3-é îñåðåäêó Âì³ñò 4-é îñåðåäêè
4

³äåî - Ìàéñòåð-êëàñ ïî MS Excel

Äîäàòêîâ³ ìîæëèâîñò³ çîáðàæåíü.

1. Çì³íà êàðòèíêè íà êîë³ð ïðè íàâåäåíí³ íà íå¿ ìèøåþ ³ ï³ñëÿ çì³íè ì³ñöÿ ðîçòàøóâàííÿ êóðñîðà:
onmouseover ="this.style.background = `# íîìåð êîëüîðó`" onmouseout ="this.style.background = `# íîìåð êîëüîðó`"

³äåî - ßê âñòàâëÿòè êàðòèíêó â HTML




2. Çì³íà êàðòèíêè íà ³íøå çîáðàæåííÿ ïðè íàâåäåíí³ ìèøåþ:
onmouseover ="this.src = `images / 1.jpg`" onmouseout ="this.src = `images / 2.jpg`"

3. Âñòàâêà îáåðòàºòüñÿ êàðóñåë³ ç êàðòèíîê â îñåðåäîê òàáëèö³ (çíà÷åííÿ ìîæíà çì³íþâàòè):

³äåî - ßê âñòàâèòè HTML êîä â HTML ñòîð³íêó




Ïîä³ëèñÿ â ñîö ìåðåæàõ:

Óâàãà, ò³ëüêè ÑÜÎÃÎÄͲ!
Ñõîæ³
» » ßê âñòàâèòè êàðòèíêó â html òàáëèöþ