Tabela html

0

Dzień dobry, próbuję zrobić tabelę ale kompletnie mi to nie wychodzi.

Potrzebowałbym takiej jak ta w załączniku.

0

Spróbuj użyć flexboxa albo css grida, od biedy pewnie na tabelkach/floatach też się da, ale po co się męczyć?

1

@iksde: na upartego to nawet na <div style="display: inline-block... by się dało ;)

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>
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.

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.

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

1 użytkowników online, w tym zalogowanych: 0, gości: 1