tabela w css czy html

Question

Witam wszystkich !

Staram się stworzyć drzewo genealogiczne mojej ukochanej rodzinki i pomyślałem sobie, że zrobię to za pomocą kodu html/css. Wiem, że istnieją do tworzenia takich drzew specjalne programy, ale ja chce trochę poćwiczyć, więc proszę się nie czepiać ;)

Chcę uzyskać mniej więcej taki oto wygląd (oczywiście drzewo nie jest kompletne)

spokojnie już tłumaczę...  to co widać u góry to obraz w formacie .png zrobiony  GIMP-ie, ale docelowa taki efekt chciałbym uzyskać za pomocą kodu html/css

Na początku chciałem wykorzystać znacznik <TABLE></TABLE> oczywiście osadzony w div-ach

<div class="container">       
        <div id="block1">    
             <table >            
                 <tr>
                     <td>block1</td>
                 </tr>
            </table>            
        </div>         
            <hr width="800px">            
        <div id="block2">    
            <table>            
                <tr>
                    <td>block2</td>
                 </tr>
        </table>            
        </div>

tam gdzie jest wpisane block 1 i block2 będą personalia konkretnego członka rodziny. Od strony stylizacji wygląda to tak:

.container{
    background-color: white;
    margin-left: 2%;    
    margin-top: 2%;    
    margin-right: 2%;
    height: auto;
    border-right: 1px solid #330000;
    border-left: 1px solid #666666;
    border-top: 1px solid #666666;
    border-bottom: 1px solid #666666;
}
#block1 table{
    margin-top: 800px;
    margin-bottom: 20px;
    margin-left: 50px;
    width: 100px;    
    text-align: center;
}
#block2 table{
    margin-top: 0px;
    margin-bottom: 20px;
    margin-left: 350px;
    text-align: center;
}
table{    
    border-right: 1px solid #330000;
    border-left: 1px solid #666666;
    border-top: 1px solid #666666;
    border-bottom: 1px solid #666666;
}
table:hover{
    background-color: grey;
    cursor: pointer;
}

Czy może lepiej w <div class="container"> osadzić elementy blokowe tzn inne div-y, w których umieszczę poszczególne personalia danego członka rodziny i wystylizuje to tak żeby dookoła nazwiska było obramowanie i inne tło po najechaniu myszą ?

I jak zrobić pionową linie ? Poziomą to wiem <hr></hr>, ale pionową ?  border-left: 1px solid color ???

Dzięki za podpowiedzi.

Comments

I jak zrobić pionową linie ?

Choćby pseudoelementem ::before lub ::after

http://codepen.io/ChrissP92/pen/yVyvNL

---

przydatne dzięki

Answer 1

Tabele istnieją do prezentowania treści w formie prostokątnej siatki - drzewo genealogiczne to bardziej graf i tworzenie go za pomocą table mija się z celem. Traci na tym m.in. semantyka kodu, ponieważ tworzyłbyś puste komórki jedynie dla linii łączących członków rodziny.

Radzę ci użyć w tym przypadku grafiki wektorowej - skalowalność, wsparcie od strony przeglądarek i łatwość ewentualnej modyfikacji sprawiają, że jest to idealne rozwiązanie do tworzenia grafów.

Comments

no tak, ale jak stworze obrazek drzewa to chyba nie bardzo będę mógł go "edytować" za pomocą stylów css ?

Chodzi mi o uzyskanie chociażby efektu :hover po najechaniu myszą na nazwisko przodka...

Wiem, że mogę nanieść tekst (nazwisko przodka) na taki obrazek, ale jak to zrobię to przy zmianie rozdzielczości nazwisko nie będzie się pokrywać z wyznaczonym miejscem na drzewie... (albo ja nie umie tego zrobić) :/

---

ok kumam... zrobiłem to w css div-ami

<div class="DownL"></div><!-- linia pozioma-->
        <div id="block1">
            <h3>??</h3>
        </div>

h3{
    border-right: 1px solid #330000;
    border-left: 1px solid #666666;
    border-top: 1px solid #666666;
    border-bottom: 1px solid #666666;
    background-color:      #717171;
    padding: 5px;
    font-size: 15px;
    font-weight: normal;
    color:white;
}
h3:hover{
    background-color: #afafaf;
    cursor: pointer;
    color:red;
}

#block1{
    margin-top: 800px;
    margin-bottom: 20px;
    margin-left: 40%;
    width: 100px;    
    text-align: center;
}
.DownL{
    border-bottom: 1px solid #666666;
    width: 30%;
    margin-top: 780px;
    margin-left: 28%;
    position: absolute;
}

 

Answer 2

Część,

Nie wiem czy przy tak dużej ilości tabelek nie będziesz miał bałaganu w kodzie html i radziłbym użyć divy do tego. A jeżeli chodzi o pionowa linie to możesz np zrobić diva o wysokości równej linii jaką chcesz uzyskać,szerokości 1 px i czarnym tle, albo na hr zastosować transforme rotate.

Comments

Też polecam divy jak chcesz już robić w ten sposób. Nie wyobrażam sobie pisania tego w tabelach, to było by ćwiczenie cierpliwości chyba i samokontroli (żeby nie wyrzucić laptopa po p\dłuższej chwili), a nie programowania :)