Tabela html

Odpowiedz Nowy wątek
2019-10-24 12:42

Rejestracja: 7 miesięcy temu

Ostatnio: 7 miesięcy temu

0

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

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

Pozostało 580 znaków

2019-10-24 12:49

Rejestracja: 2 lata temu

Ostatnio: 2 godziny temu

0

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

Pozostało 580 znaków

2019-10-24 13:12
Moderator Kariera

Rejestracja: 2 lata temu

Ostatnio: 1 godzina temu

Lokalizacja: Poznań

1

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


Naczelny forumowy hejter Apple

That game of life is hard to play, I'm gonna lose it anyway
The losing card I'll someday lay, So this is all I have to say

Pozostało 580 znaków

2019-10-24 13:46

Rejestracja: 2 lata temu

Ostatnio: 2 godziny temu

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>

Tutaj jest podobna sytuacja co z dyskryminacją białych - wszystko stanęło na głowie. Dawniej tabelki były wykorzystywane wszędzie, budowano na nich układy, ale potem poszedł news w eter, że jest to passe, więc ludzie sobie zapamiętali, że nie wolno korzystać z <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ć. - cerrato 2019-10-24 13:50
@cerrato: No to ja jestem rasistką i używam rowspan, żeby udowodnić supremację pierwszej kolumny :> - Freja Draco 2019-10-24 13:51
Najlepiej niech tego screena wstawi na stronę zamiast się babrać w CSSach. - iksde 2019-10-24 13:58

Pozostało 580 znaków

2019-10-24 14:07

Rejestracja: 2 lata temu

Ostatnio: 2 godziny temu

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.

Pozostało 580 znaków

2019-10-24 14:15

Rejestracja: 2 lata temu

Ostatnio: 2 godziny temu

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.


Pozostało 580 znaków

2019-10-24 15:22

Rejestracja: 2 lata temu

Ostatnio: 2 godziny temu

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.stackexcha[...]to-use-table-in-a-design/6037

W sumie racja. - Freja Draco 2019-10-24 15:37

Pozostało 580 znaków

Odpowiedz

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