HTML ile tablo oluşturmak için <TABLE>…</TABLE> etiketi ile beraber <TR> ve <TD> etiketlerini öğrenmemiz gerekir.
<TABLE>…</TABLE> etiketi tabloyu oluşturmaya başladığımız zaman ve bitirdiğimizde kullanılmaktadır. <TR>…</TR> etiketi satır oluşturmak için kullanılırken, <TD>…</TD> etiketi sütun oluşturmak için kullanılır.
3 satır 4 sütundan oluşan bir tablo oluşturalım. 3 satır olacağı için <TABLE>…</TABLE> etiketi içerisinde 3 adet <TR>…</TR> etiketi kullanılacaktır. Her bir satırın da kendine ait 4 sütunu olduğu için toplamda 12 adet <TD>…</TD> etiketi kullanılacaktır. BORDER özelliği kullanılarak oluşturduğumuz tablonun satır ve sütunlarına kenarlık ekleyerek görünür olmasını sağladık.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <TABLE BORDER="1"> <TR> <TD>1</TD> <TD>2</TD> <TD>3</TD> <TD>4</TD> </TR> <TR> <TD>5</TD> <TD>6</TD> <TD>7</TD> <TD>8</TD> </TR> <TR> <TD>9</TD> <TD>10</TD> <TD>11</TD> <TD>12</TD> </TR> </TABLE> |
Tablo Özellikleri
Cellspacing:
Hücreler arası mesafe ayarlanır. (Ör: Cellspacing=”10”)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <TABLE BORDER="2" CELLSPACING="10"> <TR> <TD>1</TD> <TD>2</TD> <TD>3</TD> <TD>4</TD> </TR> <TR> <TD>5</TD> <TD>6</TD> <TD>7</TD> <TD>8</TD> </TR> </TABLE> |
Cellpadding:
Hücre içi boşluk ayarlanır. (Ör: Cellpadding=”10”)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <TABLE BORDER="2" CELLPADDING="10"> <TR> <TD>1</TD> <TD>2</TD> <TD>3</TD> <TD>4</TD> </TR> <TR> <TD>5</TD> <TD>6</TD> <TD>7</TD> <TD>8</TD> </TR> </TABLE> |
Width:
Tablo genişliği ayarlanır.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <TABLE BORDER="1" WIDTH="300px"> <TR> <TD>1</TD> <TD>2</TD> <TD>3</TD> <TD>4</TD> </TR> <TR> <TD>5</TD> <TD>6</TD> <TD>7</TD> <TD>8</TD> </TR> </TABLE> |
Height:
Tablo yüksekliği ayarlanır.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <TABLE BORDER="1" HEIGHT="150px"> <TR> <TD>1</TD> <TD>2</TD> <TD>3</TD> <TD>4</TD> </TR> <TR> <TD>5</TD> <TD>6</TD> <TD>7</TD> <TD>8</TD> </TR> </TABLE> |
Width ve Height özellikleri <TR> ve <TD> etiketleri içerisinde de kullanılabilir.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <TABLE BORDER="1"> <TR height="50px"> <TD>1</TD> <TD>2</TD> <TD>3</TD> <TD>4</TD> </TR> <TR> <TD>5</TD> <TD>6</TD> <TD>7</TD> <TD>8</TD> </TR> </TABLE> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <TABLE BORDER="1"> <TR> <TD width="50px">1</TD> <TD>2</TD> <TD>3</TD> <TD>4</TD> </TR> <TR> <TD>5</TD> <TD>6</TD> <TD>7</TD> <TD>8</TD> </TR> </TABLE> |
Bordercolor:
Kenarlık renginin ayarlanması için kullanılır.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <TABLE BORDER="1" BORDERCOLOR="RED"> <TR> <TD>1</TD> <TD>2</TD> <TD>3</TD> <TD>4</TD> </TR> <TR> <TD>5</TD> <TD>6</TD> <TD>7</TD> <TD>8</TD> </TR> </TABLE> |
Bgcolor:
Tablonun arka plan renginin değiştirilmesi için kullanılır.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <TABLE BORDER="1" BGCOLOR="ORANGE"> <TR> <TD>1</TD> <TD>2</TD> <TD>3</TD> <TD>4</TD> </TR> <TR> <TD>5</TD> <TD>6</TD> <TD>7</TD> <TD>8</TD> </TR> </TABLE> |
