Afbeelding in HTML-tabelcel. Bijna standaardmodus

Dankzij de veelzijdigheid van tafels, een groot aantal parameters die hun uiterlijk bepalen, tabellen zijn al lang een definitieve standaard geworden voor de lay-out van webpagina's. Tafel met onzichtbare grens vertegenwoordigt alsof modulair raster, in de blokken waarvan het handig is om webpagina-elementen te plaatsen. Dit is echter niet helemaal de juiste aanpak, omdat elk HTML-object wordt gedefinieerd voor zijn eigen doeleinden en als het niet wordt gebruikt voor het beoogde doel, en overal, betekent dit dat er geen alternatieven zijn. Zo was het voor een lange tijd totdat lagen de tabellen in de website-indeling vervingen. Dit betekent niet dat er nu voortdurend lagen worden gebruikt, maar de trend is al duidelijk naar voren gekomen: tabellen worden gebruikt om tabelgegevens te plaatsen, en lagen worden gebruikt voor lay-out en ontwerp.

Een tabel maken

Een tabel bestaat uit rijen en kolommen met cellen die tekst en afbeeldingen kunnen bevatten. Tabellen worden doorgaans gebruikt om gegevens te ordenen en presenteren, maar tabellen zijn daartoe niet beperkt. Met behulp van tabellen is het handig om pagina-indelingen op te maken door tekstfragmenten en afbeeldingen op de gewenste manier te rangschikken.

Gebruik de tag om een tabel aan een webpagina toe te voegen

. Dit element dient als container voor elementen die de inhoud van de tabel definiëren. Elke tabel bestaat uit rijen en cellen, die respectievelijk worden gespecificeerd met behulp van tags En

. De tabel moet minimaal één cel bevatten (voorbeeld 12.1). Toegestaan in plaats van tag

gebruik label. Tekst in een cel die is opgemaakt met de tag, wordt door de browser vetgedrukt weergegeven en uitgelijnd in het midden van de cel. Anders worden de verschillen tussen cellen gemaakt via tags

en nee.

Voorbeeld 12.1. Een tabel maken

TABEL-tag

Cel 1 Cel 2

Cel 3

Cel 4

De volgorde van de cellen en hun uiterlijk wordt getoond in Fig. 12.1.

Dan spelen de tafels erg belangrijke rol bij het creëren van een onzichtbaar kader voor een webpagina. En dit zal helpen om tekst, menu's, afbeeldingen, enz. gelijkmatig en mooi te ordenen.
Om beter te begrijpen wat ik u probeer te vertellen, kunt u dit voorbeeld van een draadframe voor een webpagina bekijken:

Dus, hoe maak je een eenvoudige tabel in HTML?
Om een tabel te bouwen heb je drie tags nodig:

TABLE – deze tag is nodig om een tafel te openen. Het is een soort container die andere elementen bevat. Het is zo gebogen dat je er zonder donut niet uit kunt komen. Het is oké, je komt er wel achter als je een voorbeeld ziet.
Afsluitende tag

vereist.

De tabel bestaat uit een rij

rij 1	rij 1
rij 2	rij 2
rij 3	rij 3

cel 1	cel 2
cel 1	cel 2
cel 1	cel 2

TR – creëert nieuwe rij tafels. Afsluitende tag vereist.

TD – creëert een nieuwe cel op een rij. Afsluitende tag vereist.

Laten we een voorbeeld bekijken om al het bovenstaande beter te begrijpen:

Tabellen in HTML

rij 1 cel 1	rij1 cel2
rij 2 cel 1	rij 2 cel 2
rij 3 cel 1	rij 3 cel 2

Hier is het resultaat:

rij 1 cel 1	rij1 cel2
rij 2 cel 1	rij 2 cel 2
rij 3 cel 1	rij 3 cel 2

Laat me alles uitleggen.
Vóór elke creatie nieuwe tafel label wordt geopend

.
Plaats het vervolgens in het midden van de container

label , wat het begin van een nieuwe serie aangeeft.
In deze rij voegen we twee cellen in met inhoud met behulp van de tag

De rij afsluiten met een tag .
Open nog een rij met een tag
De rij afsluiten met een tag .
Open de derde rij met de tag en plaats er weer twee cellen in.
De rij afsluiten met een tag .
De tafel afsluiten met een tag

rij 1 cel 1

rij1 cel2

Ik denk dat je het door hebt? Als iemand vergeten is wat een attribuut is grens die ik samen met de tag gebruik

, Ik herinner je eraan dat dit de dikte van het frame is. Als binnen grens wordt ingesteld op “0”, dan zijn de tabelranden onzichtbaar.

Bekijk een paar voorbeelden van gemaakte tabellen en u kunt verder gaan:

Tabellen in HTML

rij 1 cel 1

rij 2 cel 1

Resultaat:

Om een afbeelding in een tabel in te voegen, moet u basiskennis hebben algemene kennis over hoe u een afbeelding invoegt HTML-bestand. Ik praat hierover binnen. Nu u de basisprincipes van afbeeldingen in HTML kent, kunt u proberen een afbeelding in een tabel in te voegen. Dit kan als volgt worden gedaan:

in lijn tussen tags Voeg afbeelding in.

Tabellen in HTML

rij 1 cel 1

rij 1 cel 2

Resultaat:

rij 1 cel 1

rij 1 cel 2

Hoe cellen in een tabel samen te voegen?

Om cellen in een tabel samen te voegen, moet u de volgende attributen gebruiken:
COLSPAN – definieert het aantal kolommen.
De standaardwaarde is 1.
ROWSPAN – bepaalt het aantal rijen.
De standaardwaarde is 1.

cellen samenvoegen bovenste rij attribuut gebruiken colspan :

Tabellen in HTML

rij 1 cel 1+2
rij 2 cel 1	rij 2 cel 2

Resultaat:

Hoe tafelgrootte instellen?

Gebruik de volgende attributen om de hoogte en breedte van de tafel in te stellen:

BREEDTE – tafelbreedte. De grootte wordt aangegeven in pixels of percentages.
HOOGTE – tafelhoogte. De grootte wordt aangegeven in pixels of percentages.

Tabellen in HTML

rij 1 cel 1	rij1 cel2
rij 2 cel 1	rij 2 cel 2

Resultaat:

Inhoud in een tabel uitlijnen

Om de inhoud (tekst, afbeeldingen) binnen een tabel uit te lijnen, kunt u de volgende kenmerken gebruiken:

UITLIJNEN - horizontale uitlijning inhoud in de tabel.
Toeschrijven UITLIJNEN toegewezen waarden: links (standaard), centrum,rechts.
links - duw de inhoud naar de linkerkant;
midden – ingesteld op het midden;
rechts - inhoud naar de rechterkant duwen

VALIGN – verticale uitlijning inhoud in de tabel.
Toeschrijven VALIGN toegewezen waarden: boven, onder, midden.
top – duw inhoud naar de top;
bodem – duw inhoud naar de bodem;
midden – plaats de inhoud in het midden

Tabellen in HTML

rij 1 cel 1	rij1 cel2
rij 2 cel 1	rij 2 cel 2

Resultaat:

Hoe maak je een tafelachtergrond?

U kunt ook de tabelachtergrond instellen voor alle cellen samen, maar ook voor elke cel afzonderlijk. U kunt de achtergrond instellen met een kleur of met een afbeelding. Er zijn twee kenmerken voor de achtergrond:

BGCOLOR – achtergrondkleur voor de hele tabel of voor elke cel afzonderlijk. De kleur wordt gespecificeerd per code of woord.
ACHTERGROND – de achtergrond in de tabel is gevuld met een afbeelding.

Let op: als u de achtergrondkleur wilt instellen of achtergrond afbeelding voor de hele tabel moeten attributen in de tag worden ingesteld

. En al is het maar voor een specifieke cel, dan voor de tag

Voor een beter begrip, zie het voorbeeld:

Tabellen in HTML

rij 1 cel 1	rij1 cel2
rij 2 cel 1	rij 2 cel 2

Resultaat:

Let op: als de afbeelding per cel kleiner is, wordt deze herhaald totdat deze de cel tot het einde vult. Als de afbeelding groter is dan de cel, wordt de achtergrond van de afbeelding bijgesneden zodat deze in de cel past.

En tot slot zal ik je nog twee nuttige kenmerken vertellen.

Als u plotseling de afstand tussen alle cellen wilt vergroten, kunnen de volgende attributen helpen:

CELLPADDING – de afstand tussen de frames van elk html-cellen tafel en het materiaal dat deze bevat.

Tabellen in HTML

rij 1 cel 1	rij1 cel2
rij 2 cel 1	rij 2 cel 2

Resultaat:

rij 1 cel 1	rij1 cel2
rij 2 cel 1	rij 2 cel 2

CELLSPACING – de afstand tussen de randen van aangrenzende cellen.

Tabellen in HTML

rij 1 cel 1	rij1 cel2
rij 2 cel 1	rij 2 cel 2

Resultaat:

rij 1 cel 1	rij1 cel2
rij 2 cel 1	rij 2 cel 2

Pfff, ik zei het toch!
Ik hoop dat ik de taak heb volbracht en alles wat ik wist duidelijk heb uitgelegd html-tabellen. Ik raad aan dat je het materiaal goed vastzet.
Probeer uw eigen tabel te maken, of beter nog, een heel raamwerk voor een webpagina op basis van een HTML-tabel.
Het beste voor jou!
Bedankt voor het bezoeken van mijn blog

Instructies

De eerste stap is het maken van de tabel als deze nog niet bestaat. Deze actie wordt uitgevoerd in het attribuut. Hiervoor worden tags gebruikt (afsluittag is vereist):

- tafel;
- lijn;

- kolom.

Belangrijkste aanvullende kenmerken:
Grens – grens;

Randkleur – randkleur;
Breedte – breedte;
Hoogte – hoogte.

De syntaxis voor een 2X2-tabel zonder rand en links/rechts uitgelijnde inhoud is:

Inhoud van de 1e cel	Inhoud van de 2e cel
Inhoud van de 3e cel	Inhoud van de 4e cel

De afbeelding moet na de tag worden geplaatst

. Als u een afbeelding in de eerste cel van de bovenstaande tabel invoegt, krijgt u:

	Inhoud van de 2e cel
Inhoud van de 3e cel	Inhoud van de 4e cel

Aanvullende kenmerken:
Breedte – breedte;
Hoogte – hoogte;
Alt - alternatieve tekst die aan de gebruiker wordt weergegeven als de functie voor het bekijken van afbeeldingen is uitgeschakeld;
Uitlijnen – horizontale uitlijning;
Valign – verticale uitlijning;
Titel – bijschrift voor de afbeelding.

Je kunt de afbeelding als link gebruiken. Om dit te doen, plaatst u het gewoon in de juiste tag:
In tabelcontext zou het er als volgt uitzien:

	Inhoud van de 2e cel
Inhoud van de 3e cel	Inhoud van de 4e cel

Extra functies afbeeldingen.

1. De kleur van de afbeelding wijzigen als u er met de muis overheen beweegt en nadat u de cursorlocatie hebt gewijzigd:
onMouseOver="this.style.background="#kleurnummer"" onMouseOut="this.style.background="#kleurnummer""

2. De afbeelding wijzigen in een andere afbeelding wanneer u met de muis beweegt:
onmouseover="dit.src="afbeeldingen/1.gif"" onmouseout="dit.src="afbeeldingen/2.gif""

3. Een roterende carrousel met afbeeldingen in een tabelcel invoegen (waarden kunnen worden gewijzigd):

// 7 variabelen om gedrag te controleren
var Car_Image_Width=100;
var Auto_Image_Height=100;
var Car_Border=waar; // waar of niet waar
var Car_Border_Color = "000000"; Rand = "0"
var Auto_Snelheid=5;
var Car_Direction=waar; // waar of niet waar
var Car_NoOfSides=6; // moet 4, 6, 8 of 12 zijn

/* array om afbeeldingen en optionele links op te geven.
Voor een 4-zijdige carrousel dient u minimaal 2 afbeeldingen op te geven
Voor een 6-zijdige carrousel specificeert u minimaal 3
Voor een 8-zijdige carrousel specificeert u minimaal 4
Voor een 12-zijdige carrousel specificeert u minimaal 6
Als de link niet nodig is, bewaar deze dan ""
*/
Car_Image_Sources=nieuwe array(
"afbeeldingen/1.gif","",
"afbeeldingen/2.gif","",
"afbeeldingen/3.gif","",
"afbeeldingen/4.gif","",
"afbeeldingen/5.gif","",
"images/6.gif",""

// OPMERKING Geen komma na de laatste regel
);

/***************** NIET BEWERKEN HIERONDER ****************************** ******/
CW_I=nieuwe array(Car_NoOfSides/2+1);C_ClcW=nieuwe array(Car_NoOfSides/2);
C_Coef=nieuwe array(
3*Wiskunde.PI/2,0,3*Wiskunde.PI/2,11*Wiskunde.PI/6,Wiskunde.PI/6,3*Wiskunde.PI/2,7*Wiskunde.PI/4, 0,
Wiskunde.PI/4.3*Wiskunde.PI/2.5*Wiskunde.PI/3.11*Wiskunde.PI/6.0,Wiskunde.PI/6,Wiskunde.PI/3);
var C_CoefOf=Car_NoOfSides==4?0:Car_NoOfSides==6?2:Car_NoOfSides==8?5:9;
C_Pre_Img=nieuwe 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;

Functie Carrousel()
if(document.getElementById)(
voor(i=0;ik

Categorieën