HTML Tablo ile ilgili
Merhabalar, aşağıda fotoğrafını eklediğim excell tablosunu HTML olarak bir türlü beceremedim. Bu konuyla ilgili yardımcı olmak isteyen çıkar mı acaba?
Soru hatalı mı? 👎
Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!
Cevaplar (3)
buyur dostum
<table border="1">
<thead>
<tr>
<th>MODEL ADI</th>
<th>MALAFA</th>
<th>TEL ÖLÇÜSÜ</th>
<th>TEL GRAM</th>
<th>TEL ADET</th>
<th>DÖKÜM</th>
<th>DÖKÜM ADET</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">
pc101
</td>
<td></td>
<td>130x130</td>
<td>90</td>
<td>220</td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>200 TERS DOÇ</td>
<td>40</td>
<td>200</td>
<td></td>
<td></td>
</tr>
<tr>
<td>ADET</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="2">
20
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
İnşallah yararlı olmuştur fakat çok temel css var kusura bakmayın sadece html ile bende aynısını yapamam
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Tablo</title>
<style>
table {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
}
td,
th {
border: 1px solid black;
text-align: center;
}
th {
background-color: #B7DEE7;
}
td {
background-color: #EAF1DE;
}
.sarılar {
background-color: #FFFF00;
padding: 15px;
}
/*
ADET isimli başlık sarı değilde beyaz olduğundan ona özel müdahale yaptık
ve etikete style niteleğiyle beyaz rengi atatık.
*/
</style>
</head>
<body>
<table>
<tr>
<!--
gönderdiğiniz resim dosyasında başlık boşlukları farklı olduğundan
ve hepsine id tanımlamak zor olduğundan hepsine style niteliği tanımladık.
-->
<th style="padding: 4px 35px;">MODEL ADI</th>
<th style="padding: 4px 25px;">MALAFA</th>
<th style="padding: 4px 35px;">TEL ÖLÇÜSÜ</th>
<th style="padding: 4px 4px;">TEL GRAM</th>
<th style="padding: 4px 4px;">TEL ADET</th>
<th style="padding: 4px 4px;">DÖKÜM</th>
<th style="padding: 4px 4px;">DÖKÜM ADET</th>
</tr>
<tr>
<th rowspan="2" class="sarılar">pc101</th>
<td></td>
<td>130X230</td>
<td>90</td>
<td>220</td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>200 TERS DOÇ</td>
<td>40</td>
<td>200</td>
<td></td>
<td></td>
</tr>
<tr>
<th style="background-color: white;">ADET</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th rowspan="2" class="sarılar">20</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Tablo</title>
<style>
table {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
}
td,
th {
border: 1px solid black;
text-align: center;
}
th {
background-color: #B7DEE7;
/*
ADET isimli başlık sarı değilde beyaz olduğundan ona özel müdahale yaptık
ve etikete style niteleğiyle beyaz rengi atatık.
*/
}
td {
background-color: #EAF1DE;
}
.sarılar {
background-color: #FFFF00;
padding: 15px;
}
div {
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div>
<table>
<tr>
<!--
gönderdiğiniz resim dosyasında başlık boşlukları farklı olduğundan
ve hepsine id tanımlamak zor olduğundan hepsine style niteliği tanımladık.
-->
<th style="padding: 4px 35px;">MODEL ADI</th>
<th style="padding: 4px 25px;">MALAFA</th>
<th style="padding: 4px 35px;">TEL ÖLÇÜSÜ</th>
<th style="padding: 4px 4px;">TEL GRAM</th>
<th style="padding: 4px 4px;">TEL ADET</th>
<th style="padding: 4px 4px;">DÖKÜM</th>
<th style="padding: 4px 4px;">DÖKÜM ADET</th>
</tr>
<tr>
<th rowspan="2" class="sarılar">pc101</th>
<td></td>
<td>130X230</td>
<td>90</td>
<td>220</td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>200 TERS DOÇ</td>
<td>40</td>
<td>200</td>
<td></td>
<td></td>
</tr>
<tr>
<th style="background-color: white;">ADET</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th rowspan="2" class="sarılar">20</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</body>
</html>