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

Bu konu çözüldü olarak işaretlenmiştir. Çözülmediğini düşünüyorsanız konuyu rapor edebilirsiniz.
Girdap

Girdap

Kilopat
Zamanın Tanığı
Katılım
9 Eylül 2020
Mesajlar
3.211
Makaleler
18
Çözümler
40
Selam, bu tablo nasıl kodlanır? CSS kısmı önemli değil, elimde görseller de var.

1699102005995.png
 
Çözüm
K
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>
Tarihe göre sırala Puana göre sırala
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
Genişletmek için tıkla...

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.
 
Artı 0 Eksi
www.w3schools.com

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 www.w3schools.com
Burası yardımcı olur.
 
Artı 0 Eksi
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>
 
Artı 0 Eksi
Çözüm
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>
Genişletmek için tıkla...
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?
 
Artı 0 Eksi
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?
Genişletmek için tıkla...
Ö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.
 
Artı 0 Eksi

Benzer konular

cakegriphi123
HTML kodları çalışmıyor
2
Mesaj
10
Görüntüleme
1.126
cakegriphi123
cakegriphi123
P
HTML mantıksal kodları anlamadım
Mesaj
4
Görüntüleme
843
Berkay Davas
Berkay Davas
Je m en fiche
  • Kilitli
Çözüldü  HTML kodları nasıl yayımlanabilir?
Mesaj
3
Görüntüleme
901
Je m en fiche
Je m en fiche
xeyro65
  • Çözüldü
Çözüldü  HTML işaretleme dilinde <p> ve <br> kodları arasındaki fark nedir?
Mesaj
4
Görüntüleme
5.560
migration
migration
F 16 Fighting Falcon
Hazır HTML kodları var mı?
Mesaj
9
Görüntüleme
2.087
Linux Kaymak
Linux Kaymak

Technopat Haberler

Yeni konular

Yeni mesajlar

Geri
Yukarı