Cellán belüli margó (cellpadding) :
Cellák közti távolság (cellspacing) :
Táblázat margózás (cellpadding + cellspacing) :
Egységes háttérszín :
Cellák háttérszine :
Kombinált háttérszín-használat :
Egységes háttérkép :
Táblázat neve (caption) :
Táblázat igazítása (vízszintesen) :
Cellán belüli függõleges igazítás :
Táblázat mérete :
Táblázaton belüli méretbeli arányok :
Cellák egyesítése :
Minták;
<html>
<head>
</head>
<body>
<table border="27" bordercolor="red" cellpadding="10" cellspacing="10" bgcolor="orange">
<tr><td>1. elem</td>
<td>2. elem</td></tr>
<tr><td>3. elem</td>
<td>4. elem</td></tr>
</table>
<table border="1" cellpadding="10" align="center" width=300" height="160">
<tr><td width=200" height="70%">200 * 70%</td>
<td width=100">100 * 70%</td></tr>
<tr><td height="30%">200 * 30%</td>
<td>100 * 30%</td></tr>
</table>
<table border="1" cellpadding="10">
<tr><td>1. elem</td>
<td>2. elem</td>
<td>3. elem</td></tr>
<tr><td>4. elem</td>
<td colspan="2">5-6. elem</td></tr>
</table>
<br>
<table border="1" cellpadding="10">
<tr><td rowspan="2">1-4. elem</td>
<td>2. elem</td>
<td>3. elem</td></tr>
<tr><td>5. elem</td>
<td>6. elem</td></tr>
</table>
<table border="1" cellpadding="10" align="center" width=70%" height="140">
<tr><td>1. elem</td>
<td>2. elem</td></tr>
<tr><td>3. elem</td>
<td>4. elem</td></tr>
</table>
</body>
</html>
http://htmliskola.uw.hu/pl07.html
ISmétlés
<pre>
Ez az elsõ sor.
Ez a második.
Ez már a harmadik.
</pre>
<font face="Arial"> Ez a szövegrész Arial betûtipusban van megírva. </font>
<font face="Garamond"> Ez meg Garamond betûtipusban. </font>
<font size="-1"> Én 1-el kisebb vagyok az alapméretnél. </font>
<font size="4"> Az én méretem meg 4. </font>
<b> Ez a szöveg félkövér lesz. </b>
<i> Döljünk egy kicsit jobbra. </i>
<u> Húzzuk alá ezt a szöveget? </u>
<b><i> Félkövér, dölt szöveg. </i></b>
<h1> 1-es fejléc - Fõcím </h1>
<h2> 2-es fejléc - Alcím </h1>
<h3> 3-es fejléc </h1>
<h6> 6-es fejléc </h1>
<ul>
<li> elsõ vázlatpont </li>
<li> második vázlatpont </li>
<li> harmadik... </li>
</ul>
<ol>
<li> elsõ szempont </li>
<li> második szempont </li>
<li> szempont szempont </li>
</ol>
<dl>
<dt> halak <dd> vízi állatok
<dt> emlõsök <dd> emlõvel rendelkeznek
<dt> madarak <dd> szárnyas gerincesek
</dl>
<a href="mailto:nekem@email.hu"> Küldj nekem e-mailt! </a><br>
<a href="http://www.google.com"> Google </a><br>
<a href="alma.html"> Az alma fajtái </a>
<a href="alma.jpg"> "képmutató" </a>
<a href="alma.html" target="_blank"> Az alma fajtái </a> (_blank)
<a href="alma.html" target="_parent"> Az alma fajtái </a> (_parent)
<a href="alma.html" target="_self"> Az alma fajtái </a> (_self)
<a href="alma.html" target="_top"> Az alma fajtái </a> (_top)
<img src="alma.jpg">
<img src="alma.jpg" border="0"><br>
<img src="alma.jpg" border="2"><br>
<img src="alma.jpg" border="15">
<img src="alma.jpg" width="121" height="122"><br>
<img src="alma.jpg" width="150" height="152"> {arányos nagyítás} <br>
<img src="alma.jpg" width="55" height="150"> {nyújtott aránytalan kép}
<p><img src="lepke.jpg" align="left"> A hernyók kékeszöldek fekete pontokkal, hátukon és oldalaikon sárga hosszcsíkokkal. Igen felánkok, a káposztalevelek összerágása által gyakran nagy károkat okoznak. Fákon vagy kerítéseken bábozzák be magukat. </p>
<img src="alma.jpg" alt="Ez egy alma">
<a href="alma.html"><img src="gomb.gif" border="0"></a><br>
<a href="alma.html">Gomb: <img src="gomb.gif" border="0"></a>
Szakasz
<div style="color:#0000FF; font-size:25pt; text-decoration: underline;">
<h3>Ez egy címsor div elem.</h3>
<p>Ez egy szöveg div elem.</p>
</div>
<div style="width: 150px; border: 2px solid black; background-color: rgb(214, 210, 210); text-align:center;">
Ez a div tartalmazza
<div style="width:100px; border: 1px solid black; background-color: rgb(250, 240, 240); margin: 0 auto;">
ezt a divet.
</div>
<div style="float: right;
margin: 0px; padding: 5px;
border-style: none;
width: 258px">
<a href="hattyuk_nagy.jpg"
onclick="window.open('hattyuk_nagy.jpg', '',
'width=825, height=625, left=20, top=25, screenX=20, screenY=25, directories=no, menubar=no, toolbar=no');
return false;">
<img src="hattyuk_kicsi.jpg"
width="248" height="186" alt="Hattyúk"
style="margin: 0px">
</a>
<p style="font-size: 10pt;
color: #555555;
text-align: center;
margin-top: 3px">
Nagyításhoz kattints a képre!</p>
</div>
Formok
<form action=”answer1.php” method=”get”>
Felhasználó név:
<input type="text" name="username"><br>
E-mail cím:
<input type="text" name="emailaddress"><br>
<input type="submit" value="Küldés">
</form>
formázása
input {margin: 5px}
form {text-align: left;
border-style: solid; border-width: 1px;
border-color: #0000ff;
padding: 3px; margin: 3px}
beléptető
Felhasználó név:
<input type="text" name="username" size="35" maxlength ="50">
Jelszó:
<input type="password" name="userpassword" size="20"
maxlength="15"> (maximum 15 karakter)
jelölőnégyzet
Nyelvtudás:
<input type="checkbox" name="lang1" value="hu"
checked>magyar<br>
<input type="checkbox" name="lang2" value="en">angol<br>
<input type="checkbox" name="lang3" value="de">német<br>
<input type="checkbox" name="lang4" value="other">egyéb<br>
rádiógomb
Legmagasabb iskolai végzettség:
<input type="radio" name="education"
value="elementary">alapfokú<br>
<input type="radio" name="education" value="secondary"
checked>középfokú<br>
<input type="radio" name="education"
value="higher">felsőfokú<br>
csatolás
Csatolt fájl:
<input type="file" name="attachment" size="40">
rejtett
<input type="hidden" name="user_id" value="456789">
küldés
<input type="submit" value="Űrlap küldése">
törlés
<input type="reset" value="Adatok törlése">
gomb
<input type="button" value="Számítás indítása"
onclick="sum_calculator();">
2 + 2 = <span id="sum_result">?</span>
területgomb
Válassza ki az Önhöz legközelebbi márkakereskedésünket:
<input type="image" name="hungary_map" src="hungary.gif"
alt="Magyarország térkép a viszonteladóinkkal">
text
<textarea name="usertext" rows="5"
cols="50">Írd le ide a véleményedet</textarea>
<textarea name="usertext" rows="5" cols="50"></textarea>
gomb
<button type="button" onclick="js_example();">
Tovább <img class="buttonpicture" src="arrow.gif" alt="arrow">
</button>
választás
<select name="carlist1">
<option value="none" selected>Válassz autó márkát</option>
<option value="honda">Honda</option>
<option value="nissan">Nissan</option>
<option value="suzuki">Suzuki</option>
<option value="toyota">Toyota</option>
<option value="audi">Audi</option>
<option value="bmw">BMW</option>
<option value="mercedes">Mercedes</option>
<option value="opel">Opel</option>
<option value="vw">Volkswagen</option>
</select>
<select name="carlist2" multiple size="5">
<option value="none" selected>Válassz autó márkát</option>
<optgroup label="Japán autók">
<option value="honda">Honda</option>
<option value="nissan">Nissan</option>
<option value="suzuki">Suzuki</option>
<option value="toyota">Toyota</option>
</optgroup>
<optgroup label="Német autók">
<option value="audi">Audi</option>
<option value="bmw">BMW</option>
<option value="mercedes">Mercedes</option>
<option value="opel">Opel</option>
<option value="vw">Volkswagen</option>
</optgroup>
</select><br>
jelölő
Legmagasabb iskolai végzettség:<br>
<label>alapfokú<input type="radio" name="education"
value="elementary"></label><br>
<label>középfokú<input type="radio" name="education"
value="secondary" checked></label><br>
<label>felsőfokú<input type="radio" name="education"
value="higher"></label><br>
Legmagasabb iskolai végzettség:<br>
<table>
<tr><td><label for="edu1">alapfokú</label></td>
<td><input type="radio" name="edu" id="edu1"
value="elementary"></td>
</tr>
<tr><td><label for="edu2">középfokú</label></td>
<td><input type="radio" name="edu" id="edu2"
value="secondary" checked></td>
</tr>
<tr><td><label for="edu3">felsőfokú</label></td>
<td><input type="radio" name="edu" id="edu3"
value="higher"></td>
</tr>
</table>
<form method="get" action="answer2.php">
<fieldset>
<legend>Személyes adatok</legend>
Név: <input type="text" name="username" size="35"
maxlength="50"><br>
E-mail cím: <input type="text" name="email" size="35"
maxlength="50"><br>
</fieldset>
ablak
<fieldset>
<legend>Nyelvtudás, iskolai végzettség</legend>
Nyelvtudás:<br>
<input type="checkbox" name="lang1" value="hu"
checked>magyar<br>
<input type="checkbox" name="lang2" value="en">
angol<br>
<input type="checkbox" name="lang3" value="de">
német<br>
<input type="checkbox" name="lang4" value="other">
egyéb<br>
Legmagasabb iskolai végzettség:<br>
<input type="radio" name="edu" value="elementary">
alapfokú<br>
<input type="radio" name="edu" value="secondary"
checked>középfokú<br>
<input type="radio" name="edu" value="higher"> felsőfokú<br>
</fieldset>
<input type="submit" value="Küldés">
</form>
css
input {margin: 5px}
form {text-align: left; border-style: solid;
border-width: 2px; border-color: #0000ff;
padding: 3px; margin: 3px}
fieldset {margin-top: 10px; margin-bottom: 10px;
background-color: #ddffff; border-style: solid;
border-width: 1px; border-color: #0000ff}
legend {color: #0000ff; font-size: 12pt;
font-weight: bold; font-family: Helvetica}
http://www.webkalap.hu/html/attributes/title.php
Cellák közti távolság (cellspacing) :
Táblázat margózás (cellpadding + cellspacing) :
Egységes háttérszín :
Cellák háttérszine :
Kombinált háttérszín-használat :
Egységes háttérkép :
Táblázat neve (caption) :
Táblázat igazítása (vízszintesen) :
Cellán belüli függõleges igazítás :
Táblázat mérete :
Táblázaton belüli méretbeli arányok :
Cellák egyesítése :
Minták;
<html>
<head>
</head>
<body>
<table border="27" bordercolor="red" cellpadding="10" cellspacing="10" bgcolor="orange">
<tr><td>1. elem</td>
<td>2. elem</td></tr>
<tr><td>3. elem</td>
<td>4. elem</td></tr>
</table>
<table border="1" cellpadding="10" align="center" width=300" height="160">
<tr><td width=200" height="70%">200 * 70%</td>
<td width=100">100 * 70%</td></tr>
<tr><td height="30%">200 * 30%</td>
<td>100 * 30%</td></tr>
</table>
<table border="1" cellpadding="10">
<tr><td>1. elem</td>
<td>2. elem</td>
<td>3. elem</td></tr>
<tr><td>4. elem</td>
<td colspan="2">5-6. elem</td></tr>
</table>
<br>
<table border="1" cellpadding="10">
<tr><td rowspan="2">1-4. elem</td>
<td>2. elem</td>
<td>3. elem</td></tr>
<tr><td>5. elem</td>
<td>6. elem</td></tr>
</table>
<table border="1" cellpadding="10" align="center" width=70%" height="140">
<tr><td>1. elem</td>
<td>2. elem</td></tr>
<tr><td>3. elem</td>
<td>4. elem</td></tr>
</table>
</body>
</html>
http://htmliskola.uw.hu/pl07.html
ISmétlés
<pre>
Ez az elsõ sor.
Ez a második.
Ez már a harmadik.
</pre>
<font face="Arial"> Ez a szövegrész Arial betûtipusban van megírva. </font>
<font face="Garamond"> Ez meg Garamond betûtipusban. </font>
<font size="-1"> Én 1-el kisebb vagyok az alapméretnél. </font>
<font size="4"> Az én méretem meg 4. </font>
<b> Ez a szöveg félkövér lesz. </b>
<i> Döljünk egy kicsit jobbra. </i>
<u> Húzzuk alá ezt a szöveget? </u>
<b><i> Félkövér, dölt szöveg. </i></b>
<h1> 1-es fejléc - Fõcím </h1>
<h2> 2-es fejléc - Alcím </h1>
<h3> 3-es fejléc </h1>
<h6> 6-es fejléc </h1>
<ul>
<li> elsõ vázlatpont </li>
<li> második vázlatpont </li>
<li> harmadik... </li>
</ul>
<ol>
<li> elsõ szempont </li>
<li> második szempont </li>
<li> szempont szempont </li>
</ol>
<dl>
<dt> halak <dd> vízi állatok
<dt> emlõsök <dd> emlõvel rendelkeznek
<dt> madarak <dd> szárnyas gerincesek
</dl>
<a href="mailto:nekem@email.hu"> Küldj nekem e-mailt! </a><br>
<a href="http://www.google.com"> Google </a><br>
<a href="alma.html"> Az alma fajtái </a>
<a href="alma.jpg"> "képmutató" </a>
<a href="alma.html" target="_blank"> Az alma fajtái </a> (_blank)
<a href="alma.html" target="_parent"> Az alma fajtái </a> (_parent)
<a href="alma.html" target="_self"> Az alma fajtái </a> (_self)
<a href="alma.html" target="_top"> Az alma fajtái </a> (_top)
<img src="alma.jpg">
<img src="alma.jpg" border="0"><br>
<img src="alma.jpg" border="2"><br>
<img src="alma.jpg" border="15">
<img src="alma.jpg" width="121" height="122"><br>
<img src="alma.jpg" width="150" height="152"> {arányos nagyítás} <br>
<img src="alma.jpg" width="55" height="150"> {nyújtott aránytalan kép}
<p><img src="lepke.jpg" align="left"> A hernyók kékeszöldek fekete pontokkal, hátukon és oldalaikon sárga hosszcsíkokkal. Igen felánkok, a káposztalevelek összerágása által gyakran nagy károkat okoznak. Fákon vagy kerítéseken bábozzák be magukat. </p>
<img src="alma.jpg" alt="Ez egy alma">
<a href="alma.html"><img src="gomb.gif" border="0"></a><br>
<a href="alma.html">Gomb: <img src="gomb.gif" border="0"></a>
Szakasz
<div style="color:#0000FF; font-size:25pt; text-decoration: underline;">
<h3>Ez egy címsor div elem.</h3>
<p>Ez egy szöveg div elem.</p>
</div>
<div style="width: 150px; border: 2px solid black; background-color: rgb(214, 210, 210); text-align:center;">
Ez a div tartalmazza
<div style="width:100px; border: 1px solid black; background-color: rgb(250, 240, 240); margin: 0 auto;">
ezt a divet.
</div>
<div style="float: right;
margin: 0px; padding: 5px;
border-style: none;
width: 258px">
<a href="hattyuk_nagy.jpg"
onclick="window.open('hattyuk_nagy.jpg', '',
'width=825, height=625, left=20, top=25, screenX=20, screenY=25, directories=no, menubar=no, toolbar=no');
return false;">
<img src="hattyuk_kicsi.jpg"
width="248" height="186" alt="Hattyúk"
style="margin: 0px">
</a>
<p style="font-size: 10pt;
color: #555555;
text-align: center;
margin-top: 3px">
Nagyításhoz kattints a képre!</p>
</div>
Formok
<form action=”answer1.php” method=”get”>
Felhasználó név:
<input type="text" name="username"><br>
E-mail cím:
<input type="text" name="emailaddress"><br>
<input type="submit" value="Küldés">
</form>
formázása
input {margin: 5px}
form {text-align: left;
border-style: solid; border-width: 1px;
border-color: #0000ff;
padding: 3px; margin: 3px}
beléptető
Felhasználó név:
<input type="text" name="username" size="35" maxlength ="50">
Jelszó:
<input type="password" name="userpassword" size="20"
maxlength="15"> (maximum 15 karakter)
jelölőnégyzet
Nyelvtudás:
<input type="checkbox" name="lang1" value="hu"
checked>magyar<br>
<input type="checkbox" name="lang2" value="en">angol<br>
<input type="checkbox" name="lang3" value="de">német<br>
<input type="checkbox" name="lang4" value="other">egyéb<br>
rádiógomb
Legmagasabb iskolai végzettség:
<input type="radio" name="education"
value="elementary">alapfokú<br>
<input type="radio" name="education" value="secondary"
checked>középfokú<br>
<input type="radio" name="education"
value="higher">felsőfokú<br>
csatolás
Csatolt fájl:
<input type="file" name="attachment" size="40">
rejtett
<input type="hidden" name="user_id" value="456789">
küldés
<input type="submit" value="Űrlap küldése">
törlés
<input type="reset" value="Adatok törlése">
gomb
<input type="button" value="Számítás indítása"
onclick="sum_calculator();">
2 + 2 = <span id="sum_result">?</span>
területgomb
Válassza ki az Önhöz legközelebbi márkakereskedésünket:
<input type="image" name="hungary_map" src="hungary.gif"
alt="Magyarország térkép a viszonteladóinkkal">
text
<textarea name="usertext" rows="5"
cols="50">Írd le ide a véleményedet</textarea>
<textarea name="usertext" rows="5" cols="50"></textarea>
gomb
<button type="button" onclick="js_example();">
Tovább <img class="buttonpicture" src="arrow.gif" alt="arrow">
</button>
választás
<select name="carlist1">
<option value="none" selected>Válassz autó márkát</option>
<option value="honda">Honda</option>
<option value="nissan">Nissan</option>
<option value="suzuki">Suzuki</option>
<option value="toyota">Toyota</option>
<option value="audi">Audi</option>
<option value="bmw">BMW</option>
<option value="mercedes">Mercedes</option>
<option value="opel">Opel</option>
<option value="vw">Volkswagen</option>
</select>
<select name="carlist2" multiple size="5">
<option value="none" selected>Válassz autó márkát</option>
<optgroup label="Japán autók">
<option value="honda">Honda</option>
<option value="nissan">Nissan</option>
<option value="suzuki">Suzuki</option>
<option value="toyota">Toyota</option>
</optgroup>
<optgroup label="Német autók">
<option value="audi">Audi</option>
<option value="bmw">BMW</option>
<option value="mercedes">Mercedes</option>
<option value="opel">Opel</option>
<option value="vw">Volkswagen</option>
</optgroup>
</select><br>
jelölő
Legmagasabb iskolai végzettség:<br>
<label>alapfokú<input type="radio" name="education"
value="elementary"></label><br>
<label>középfokú<input type="radio" name="education"
value="secondary" checked></label><br>
<label>felsőfokú<input type="radio" name="education"
value="higher"></label><br>
Legmagasabb iskolai végzettség:<br>
<table>
<tr><td><label for="edu1">alapfokú</label></td>
<td><input type="radio" name="edu" id="edu1"
value="elementary"></td>
</tr>
<tr><td><label for="edu2">középfokú</label></td>
<td><input type="radio" name="edu" id="edu2"
value="secondary" checked></td>
</tr>
<tr><td><label for="edu3">felsőfokú</label></td>
<td><input type="radio" name="edu" id="edu3"
value="higher"></td>
</tr>
</table>
<form method="get" action="answer2.php">
<fieldset>
<legend>Személyes adatok</legend>
Név: <input type="text" name="username" size="35"
maxlength="50"><br>
E-mail cím: <input type="text" name="email" size="35"
maxlength="50"><br>
</fieldset>
ablak
<fieldset>
<legend>Nyelvtudás, iskolai végzettség</legend>
Nyelvtudás:<br>
<input type="checkbox" name="lang1" value="hu"
checked>magyar<br>
<input type="checkbox" name="lang2" value="en">
angol<br>
<input type="checkbox" name="lang3" value="de">
német<br>
<input type="checkbox" name="lang4" value="other">
egyéb<br>
Legmagasabb iskolai végzettség:<br>
<input type="radio" name="edu" value="elementary">
alapfokú<br>
<input type="radio" name="edu" value="secondary"
checked>középfokú<br>
<input type="radio" name="edu" value="higher"> felsőfokú<br>
</fieldset>
<input type="submit" value="Küldés">
</form>
css
input {margin: 5px}
form {text-align: left; border-style: solid;
border-width: 2px; border-color: #0000ff;
padding: 3px; margin: 3px}
fieldset {margin-top: 10px; margin-bottom: 10px;
background-color: #ddffff; border-style: solid;
border-width: 1px; border-color: #0000ff}
legend {color: #0000ff; font-size: 12pt;
font-weight: bold; font-family: Helvetica}
http://www.webkalap.hu/html/attributes/title.php
Nincsenek megjegyzések:
Megjegyzés küldése