HTML Yerleşimi çok basittir. Gövdenin kendisi için fazla seçenek yok denebilir. Ama tablolar HTML sayfalarının ekmekle tereyağı gibidir. Bir tablonun hücresine herhangi bir öğe yerleştirilebilir. Bu bir başka tablo da olabilir.

Kaynak: Daha geniş bilgi için Gelişmiş Özellikler konulu sayfayı tıklayın.

Satır kırılmalarını zorlama

Arada sırada satır kırılmaları zorlanmak istenir. Bunu yapmak için "br" biçimi kullanılır. Örneğin posta adresinde bunu kullanırsınız:

<p>The Willows<br>
21 Runnymede Avenue<br>
Morton-in-the-marsh<br>
Oxfordshire OX27 3BQ</p>

"br" biçimi hiçbir zaman bitiş biçimi istemez. Bu tür bitiş biçimi istemeyen kodlamaya "empty" (boş) öğe denir.

Boşluklar nasıl eklenebilir

Tarayıcı yazıyı otomatik olarak sağ ve sol kenarlara oturacak biçimde düzenler. Satır kırıcılar boşluk bırakılacak her yere eklenebilir. Bazen tarayıcının iki sözcük arasındaki boşluklar yerine satır kırılması koyması istenmez. Örneğin marka adı olan "Coca Cola" bu tür sözcüklerdendir. Burada " " kullanmak iyi bir çözümdür. "Coca Cola" tek sözcük gibi göründüğünden (bu özelliğini koruduğundan) satır kırılmasına uğramaz. Örneğin:

Tatladırılmış karbonatlı içeceklerden Coca Cola,
Dünyaca ünlü olmuştur.

Satırı içerden yazdırmak için yinelenen kırılamayan boşluk yazmak iyi bir örnek değildir. Yerine "stil" kuralları kullanılmalıdır.

Önceden kalıplanan yazı

WEB sayfalarının en önemli özelliği satırlar tarayıcı penceresine göre satıra yayılır (yeniden düzenlenir). Bazen bu özellik kaldırılmak istenir. Özellikle program kodlarını görüntülerken kullanmak gerekir. Bu işlem için "pre" biçimi kullanılır. Örneğin:

<pre>
    void Node::Remove()
    {
        if (prev)
            prev->next = next;
        else if (parent)
            parent->SetContent(null);

        if (next)
            next->prev = prev;

        parent = null;
    }
</pre>

Aşağıdaki biçimde görünür:

    void Node::Remove()
    {
        if (prev)
            prev->next = next;
        else if (parent)
            parent->SetContent(null);

        if (next)
            next->prev = prev;

        parent = null;
    }

Yazı ve art alan renkleri stil sayfalarıyla belirlenir. Unutmayın ki tüm satır kırılmaları ve boşluklar HTML'de göründüğü biçimde gerçekleşir. Bir istisna olarak "<pre>" biçiminden hemen sonra gelen yeni satır ve "</pre>" biçiminden önceki yeni satır dikkate alınmaz. Aşağıdaki yazılımın her ikiside aynı biçimde yorumlanır:

lt;pre>önceden kalıplanmış yazı</pre>

<pre>
önceden kalıplanmış yazı
</pre>

Önceden kalıplanmış yazılarda tekdüze yazı tipleri kullanılır. Bu tür yazılarda boşluklar olsun, harfler olsun hep aynı endedir. Eğer "pre" biçimi için stil kurallarında tekdüze yazı tipleri yerine bazı tarayıcılarda değişik yazı tipleri kullanılabilir. Örneğin tüm "pre" biçimlerinde yeşil renk kullanmak istenirse:

<style type="text/css">
  pre { color: green; background: white; font-family: monospace; }
</style>

Eğer yazı için renk belirlerseniz, art alan için de renk belirtmekte yarar vardır. Bu art alan rengiyle yazı renginin ayrımındaki zorluğu önlemek için gereklidir. "pre" öğesi için art alan rengi belirtmek yerine "body" için bu rengi tanımlamak daha iyidir.

<style type="text/css">
  body { color: black; background: white; }
  pre { color: green; font-family: monospace; }
</style>

<table id="shell" bgcolor="black" border="1" heigh="200" width="300">
<tr><td>
<table id="inner" bgcolor="white" heigh="100" width="100">
<tr><td>Tables inside tables!</td></tr>
</table>
</td></tr></table>
   

Tablo içinde tablolar!

<table cellspacing="1" cellpadding="0" border="0"
 bgcolor="black" id="shell" height="250" width="400">
<tr height="50"><td colspan="2" bgcolor="white">
<table title="Banner" id="mybanner" border="0">
<tr><td>Manteşi buraya yerleştirin</td></tr>
</table>

</td></tr>
<tr height="200"><td bgcolor="white">
<table id="navigation" title="Navigation" border="0">
<tr><td>Bağlar!</td></tr>
<tr><td>Bağlar!</td></tr>
<tr><td>Bağlar!</td></tr>
</table>
</td><td bgcolor="white">
<table title="Content" id="mycontent" border="0">
<tr><td>İçerik buraya gelir</td></tr>

</table>
</td></tr></table>

Manteşi buraya yerleştirin
Bağlar! Bağlar! Bağlar!	İçerik buraya gelir

<table id="shell" title="Shell" height="250" width="400"
 border="0" bgcolor="black" cellspacing="1" cellpadding="0">
<tr height="50"><td bgcolor="white">
<table title="banner" id="mybanner">
<tr><td>Manteş buraya gelir</td></tr>
</table>

</td></tr>
<tr height="25"><td bgcolor="white">
<table title="Navigation" id="navigation">
<tr><td>Bağlar!</td>
<td>Bağlar!</td>

<td>Bağlar!</td></tr>
</table>
</td></tr>
<tr><td bgcolor="white">
<table title="Content" id="mycontent">
<tr><td>İçerik buraya gelir</td></tr>

</table>
</td></tr></table>

Manşet buraya gelir

Bağlar! Bağlar! Bağlar!

İçerik buraya gelir