Çözüldü Görseldeki HTML tablosunun kodları nedir?

Girdap · 4 Kasım 2023

Selam, bu tablo nasıl kodlanır? CSS kısmı önemli değil, elimde görseller de var.

kaan.w · 4 Kasım 2023

rowspan ve colspan kullanmanız gerekiyor.

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Technopat</title>
    <style>
      table,
      th,
      td {
        border: 1px solid black;
        border-collapse: collapse;
        padding: 1rem;
        font-family: sans-serif;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <th colspan="2">Monday</th>
        <th colspan="2">Thuesday</th>
        <th colspan="2">Wednesday</th>
        <th colspan="2">Thursday</th>
      </tr>
      <tr>
        <td colspan="2">resim</td>
        <td colspan="2">resim</td>
        <td colspan="2">resim</td>
        <td colspan="2">resim</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>2</td>
        <td>2</td>
        <td>3</td>
        <td>3</td>
        <td>4</td>
        <td>4</td>
      </tr>
      <tr>
        <td colspan="4" rowspan="2">No Weather Warning</td>
        <td colspan="2">Strong Winds</td>
        <td colspan="4" rowspan="2">Heavy Rain</td>
      </tr>
      <tr>
        <td colspan="2">Category 1</td>
      </tr>
    </table>
  </body>
</html>

spriggan · 4 Kasım 2023

Girdap dedi:
Selam, bu tablo nasıl kodlanır? CSS kısmı önemli değil, elimde görseller de var.

Eki Görüntüle 2002496

Tablo yapısı veya div kullanarak aynı görünümü elde edebilirsin.

Bu görünümü tablolar ile elde etmek için colspan, rowspan gibi propertyleri kullanabilirsin.

Girdap · 4 Kasım 2023

spriggan dedi:
Tablo yapısı veya div kullanarak aynı görünümü elde edebilirsin.

Bu görünümü tablolar ile elde etmek için colspan, rowspan gibi propertyleri kullanabilirsin.

Ben de onu soruyorum zaten hocam. Tablo yapısının kodlarını, o yüzden açtım konuyu.

xScpit · 4 Kasım 2023

HTML table tag

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

Burası yardımcı olur.

walter wick · 4 Kasım 2023

Girdap dedi:
Selam, bu tablo nasıl kodlanır? CSS kısmı önemli değil, elimde görseller de var.

Eki Görüntüle 2002496

CSS ile yapman daha iyi olur.

kaan.w · 4 Kasım 2023

rowspan ve colspan kullanmanız gerekiyor.

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Technopat</title>
    <style>
      table,
      th,
      td {
        border: 1px solid black;
        border-collapse: collapse;
        padding: 1rem;
        font-family: sans-serif;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <th colspan="2">Monday</th>
        <th colspan="2">Thuesday</th>
        <th colspan="2">Wednesday</th>
        <th colspan="2">Thursday</th>
      </tr>
      <tr>
        <td colspan="2">resim</td>
        <td colspan="2">resim</td>
        <td colspan="2">resim</td>
        <td colspan="2">resim</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>2</td>
        <td>2</td>
        <td>3</td>
        <td>3</td>
        <td>4</td>
        <td>4</td>
      </tr>
      <tr>
        <td colspan="4" rowspan="2">No Weather Warning</td>
        <td colspan="2">Strong Winds</td>
        <td colspan="4" rowspan="2">Heavy Rain</td>
      </tr>
      <tr>
        <td colspan="2">Category 1</td>
      </tr>
    </table>
  </body>
</html>

Girdap · 4 Kasım 2023

kaan.w dedi:

rowspan ve colspan kullanmanız gerekiyor.

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Technopat</title>
    <style>
      table,
      th,
      td {
        border: 1px solid black;
        border-collapse: collapse;
        padding: 1rem;
        font-family: sans-serif;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <th colspan="2">Monday</th>
        <th colspan="2">Thuesday</th>
        <th colspan="2">Wednesday</th>
        <th colspan="2">Thursday</th>
      </tr>
      <tr>
        <td colspan="2">resim</td>
        <td colspan="2">resim</td>
        <td colspan="2">resim</td>
        <td colspan="2">resim</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>2</td>
        <td>2</td>
        <td>3</td>
        <td>3</td>
        <td>4</td>
        <td>4</td>
      </tr>
      <tr>
        <td colspan="4" rowspan="2">No Weather Warning</td>
        <td colspan="2">Strong Winds</td>
        <td colspan="4" rowspan="2">Heavy Rain</td>
      </tr>
      <tr>
        <td colspan="2">Category 1</td>
      </tr>
    </table>
  </body>
</html>

Ya hay Allah razı olsun, süpersiniz. Peki hocam neden Category 1 yazan td, No Weather Warning yazan yerin altına gitmedi? Sonuçta yeni bir satır değil mi?

kaan.w · 4 Kasım 2023

Girdap dedi:
Ya hay Allah razı olsun, süpersiniz. Peki hocam neden Category 1 yazan td, No Weather Warning yazan yerin altına gitmedi? Sonuçta yeni bir satır değil mi?

Çünkü No Weather Warning ve Heavy Rain olanlara rowspan="2" verdik. Bu sayede 2 satır kaplamış oldu.

Girdap · 4 Kasım 2023

kaan.w dedi:
Çünkü No Weather Warning ve Heavy Rain olanlara rowspan="2" verdik. Bu sayede 2 satır kaplamış oldu.

Yeni satıra geçsek bile rowspan'ların yarattığı açıklıktan dolayı Strong Winds'in altı boş kaldı ve içeriye de Category 1 girdi?

kaan.w · 4 Kasım 2023

Girdap dedi:
Yeni satıra geçsek bile rowspan'ların yarattığı açıklıktan dolayı Strong Winds'in altı boş kaldı ve içeriye de Category 1 girdi?

Öyle düşünmeyin. O zaten 2. satırdaydı, diğerleri 2 satır kapladığı için böyle oldu. Değerlerle biraz oynayıp anlamaya çalışın.

Çözüldü Görseldeki HTML tablosunun kodları nedir?

Ayrıntılı düzenleme

Girdap

Kilopat

kaan.w

spriggan

Hectopat

Girdap

Kilopat

xScpit

Hectopat

HTML table tag

walter wick

Kilopat

kaan.w

Megapat

Girdap

Kilopat

kaan.w

Megapat

Girdap

Kilopat

kaan.w

Megapat

Benzer konular