Dzień dobry, próbuję zrobić tabelę ale kompletnie mi to nie wychodzi.
Potrzebowałbym takiej jak ta w załączniku.
- cranetabel.png (76 KB) - ściągnięć: 146
D 
- Rejestracja:prawie 7 lat
- Ostatnio:ponad 3 lata
- Postów:3394
2
Ale po co robić tabelki na nie-tabelkach?
Masz:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
* {
box-sizing: border-box;
margin:0px;
padding:0px;
}
TABLE.tabela {
border-collapse:collapse;
width:550px;
color:#7F7F7F;
font-family:Tahoma;
font-size:14px;
}
TABLE.tabela > TBODY > TR:nth-child(even) > TD {
background-color:#EFEFEF;
}
TABLE.tabela > TBODY > TR:nth-child(1) > TD {
width:225px;
padding:10px;
vertical-align:top;
font-weight:bold;
}
TABLE.tabela > TBODY > TR:nth-child(2) > TD {
text-align:right;
padding-right:10px;
background-color:transparent;
}
TABLE.tabela > TBODY > TR > TD {
padding-left:5px;
}
TABLE.tabela > TBODY > TR > TD:nth-child(2) {
width:80px;
font-weight:bold;
}
DIV.obrazek {
width:200px;
height:135px;
margin-top:2px;
background-color:#96AFC7;
}
</style>
</head>
<body>
<table class="tabela">
<tbody>
<tr><td rowspan="7">Nazwa Modelu<div class="obrazek">tu obrazek</div></td></tr>
<tr><td colspan="2">prawo</td></tr>
<tr><td>Pozycja:</td><td>35 m</td></tr>
<tr><td>Pozycja:</td><td>35 m</td></tr>
<tr><td>Pozycja:</td><td>35 m</td></tr>
<tr><td>Pozycja:</td><td>35 m</td></tr>
<tr><td>Pozycja:</td><td>35 m</td></tr>
</tbody>
</table>
</body>
</html>
- Rejestracja:ponad 7 lat
- Ostatnio:prawie 2 lata
1
Freja Draco napisał(a):
Ale po co robić tabelki na nie-tabelkach?
Po to, żeby potem nie musiał przepisywać całej strony jak przyjdzie do niego klient i powie, że mu na telefonie ta stronie źle wygląda. Zrobienie tego na flexboksie zajmuje tyle samo czasu, co na tabelkach, a jest dużo bardziej elastyczne i potrafi dostosować się do zawartości, nie trzeba na pałę podawać szerokości/wysokości.
- Rejestracja:prawie 7 lat
- Ostatnio:ponad 3 lata
- Postów:3394
0
iksde napisał(a):
Freja Draco napisał(a):
Ale po co robić tabelki na nie-tabelkach?
Po to, żeby potem nie musiał przepisywać całej strony jak przyjdzie do niego klient i powie, że mu na telefonie ta stronie źle wygląda. Zrobienie tego na flexboksie zajmuje tyle samo czasu, co na tabelkach, a jest dużo bardziej elastyczne i potrafi dostosować się do zawartości, nie trzeba na pałę podawać szerokości/wysokości.
Tabele też mogą się automatycznie dostosowywać do szerokości. Co nie znaczy, że muszą, bo stricte tabelarycznych danych i tak nie da się sensownie skolapsować w żadnym responsywnym widoku. W powyższym przypadku można ew. pomyśleć o wrzuceniu parametrów pod obrazek na wąskim widoku, ale w przedstawionych wymaganiach nic na ten temat nie było.
- Rejestracja:ponad 7 lat
- Ostatnio:prawie 2 lata
1
Freja Draco napisał(a):
iksde napisał(a):
Freja Draco napisał(a):
Ale po co robić tabelki na nie-tabelkach?
Po to, żeby potem nie musiał przepisywać całej strony jak przyjdzie do niego klient i powie, że mu na telefonie ta stronie źle wygląda. Zrobienie tego na flexboksie zajmuje tyle samo czasu, co na tabelkach, a jest dużo bardziej elastyczne i potrafi dostosować się do zawartości, nie trzeba na pałę podawać szerokości/wysokości.
Tabele też mogą się automatycznie dostosowywać do szerokości. Co nie znaczy, że muszą, bo stricte tabelarycznych danych i tak nie da się sensownie skolapsować w żadnym responsywnym widoku. W powyższym przypadku można ew. pomyśleć o wrzuceniu parametrów pod obrazek na wąskim widoku, ale w przedstawionych wymaganiach nic na ten temat nie było.
Żeby była jasność: tabelkę ze screena (tą po prawej stronie) jak najbardziej należy zrobić używając table, tr, td, natomiast layout - tj. obrazek, nazwę sprzętu czy link do pobrania - wręcz przeciwnie.
https://webmasters.stackexchange.com/questions/6036/why-arent-we-supposed-to-use-table-in-a-design/6037
<tr>, bo to straszne lamerstwo. I teraz tego się boją nawet tam, gdzie jest to oczywiste. Minusem jest to, że tabelki się gorzej skalują/nie są tak zupełnie RWD, a przecież responsywność to kolejny fetysz, który trzeba wyznawać.Freja Dracoiksde