Profil | Mitglieder | Registrieren | Start | Suche


PHP-Support.de » Programmierung » HTML, JavaScript & CSS » Tabelle mit verlinkter Zeile    » Hallo Gast [Login | Registrieren]

Neues Thema | Antworten   

Autor Beitrag
cologne1079@gmx.de
Mitglied
Guter User


Dabei seit: 15.02.2010
Herkunft: Kölle
Posts: 384
     Tabelle mit verlinkter Zeile Zitat | Bearbeiten

Hallo zusammen.

Ich bin nun schon länger auch im Netz nach einer Lösung am suchen, habe bisher aber nichts für mich hilfreiches gefunden.

Folgendes:

Ich habe aus einer MySQL Datenbank verschiedene Daten ausgelesen und möchte diese tabellarisch ausgeben:

ID / Überschrift / Datum / Blabla / Blabla usw

Diese ausgegebenen Daten müssen also Tabellarisch erscheinen. Als erstes dachte ich: Okay, was tabellarisch sein soll, kommt auch in eine Tabelle, auch wenn ich kein Fan von Tabellen bin. Dann aber kam mir die Problematik in den Sinn, dass ich gerne einen Link über die gesamten jeweiligen Zeilen in der Tabelle legen möchte. Der Link soll sich dabei über alle Spalten der jeweiligen Zeile erstrecken. Wenn ich also die erste Zeile

1 / Dumdidu / 01.01.1970 / Blabla / Blabla usw

hätte, soll der Link über diese gesamte Zeile gehen.

Meiner Kenntnis nach ist das mit Tabellen nicht möglich.

Also habe ich recherchiert und oft die Empfehlung gelesen, das ganze mittels CSS und Listenelementen umzusetzen. fand ich erstmal auch eine plausible Idee. ABER: Da ergibt sich dann das Problem, dass ich die Spalten nicht fein säuberlich untereinander platziert bekomme, wie man es z. B. bei MS Word mit Tabulatoren kennt.

So, nun meine Frage an die Nation. Gibt es gute Ideen und Tipps, wie ich das am besten umsetzen kann. Auf Javascript würde ich gerne verzichten, wenn möglich.

13.02.2018, 15:26 Profil | PM | E-Mail  
Andavos
Administrator
Foren-Gott


Dabei seit: 30.11.2003
Herkunft:
Posts: 6297
      Zitat | Bearbeiten

Zwei Optionen:
In Inhalt jeder Zelle als Link:
<tr>
<td><a href="ziel">1</a></td>
<td><a href="ziel">Test</a></td>
</tr>


Oder mit JavaScript und ein 'onclick'-event für die gesamte Zeile.

CSS und Listenelemente sind in der Tat nicht so gut geeignet für Tabellen

www.php-einfach.de, PHP lernen leicht gemacht
www.webhosterwissen.de, Webhosting-Vergleich
13.02.2018, 15:59 Profil | PM | E-Mail  
cologne1079@gmx.de
Mitglied
Guter User


Dabei seit: 15.02.2010
Herkunft: Kölle
Posts: 384
      Zitat | Bearbeiten

Zitat:
Orginal von Andavos
Zwei Optionen:
In Inhalt jeder Zelle als Link:
<tr>
<td><a href="ziel">1</a></td>
<td><a href="ziel">Test</a></td>
</tr>


Oder mit JavaScript und ein 'onclick'-event für die gesamte Zeile.

CSS und Listenelemente sind in der Tat nicht so gut geeignet für Tabellen


Danke Andavos,

aber deine vorgeschlagene HTML Lösung hilft mir nicht, weil dann jede einzelne Zelle einen eigenen Link hat und nicht die ganze Zeile. Die Links reagieren ja dann auch noch bei einem hover über die jeweilige Zelle und nicht als gesamte Zeile.

Javascript wollte ich wie gesagt vermeiden. Gibt es echt keine andere Lösung für sowas? Ich kann mir das kaum vorstellen. Aber wenn sogar du das schon sagst, glaube ich es.

13.02.2018, 17:20 Profil | PM | E-Mail  
Teralios
Moderator
Perfekter User


Dabei seit: 18.09.2005
Herkunft: Berlin
Posts: 2542
      Zitat | Bearbeiten

In dem fall ist das Stichwort:

Display und entsprechend table-cell und table-row oder „inline-block“ und das arbeiten mit width als Parameter.

Du wirst dabei nicht umher kommen, auch etwas Hirnschmalz in das HTML zu stecken.

13.02.2018, 19:27 Profil | PM | E-Mail  
cologne1079@gmx.de
Mitglied
Guter User


Dabei seit: 15.02.2010
Herkunft: Kölle
Posts: 384
      Zitat | Bearbeiten

Zitat:
Orginal von Teralios
In dem fall ist das Stichwort:

Display und entsprechend table-cell und table-row oder „inline-block“ und das arbeiten mit width als Parameter.

Du wirst dabei nicht umher kommen, auch etwas Hirnschmalz in das HTML zu stecken.

Zitat:
Orginal von Teralios
In dem fall ist das Stichwort:

Display und entsprechend table-cell und table-row oder „inline-block“ und das arbeiten mit width als Parameter.

Du wirst dabei nicht umher kommen, auch etwas Hirnschmalz in das HTML zu stecken.


Danke Teralios.

Mir ist klar, dass ich Hirnschmalz reinstecken muss. Ich mag es inzwischen auch nicht mehr, die fertigen Lösungen serviert zu bekommen. Mir reichen in der Regel Stichworte wie von dir und ich denke, damit komme ich schon klar. Danke dir!

Sollte doch noch was sein, melde ich mich.

13.02.2018, 21:16 Profil | PM | E-Mail  
Teralios
Moderator
Perfekter User


Dabei seit: 18.09.2005
Herkunft: Berlin
Posts: 2542
      Zitat | Bearbeiten

Zitat:
Danke Teralios.

Mir ist klar, dass ich Hirnschmalz reinstecken muss. Ich mag es inzwischen auch nicht mehr, die fertigen Lösungen serviert zu bekommen. Mir reichen in der Regel Stichworte wie von dir und ich denke, damit komme ich schon klar. Danke dir!

Sollte doch noch was sein, melde ich mich.

Leider sehen das nicht alle so.

14.02.2018, 07:08 Profil | PM | E-Mail  
ballard
Mitglied
Aktiver User


Dabei seit: 26.05.2005
Herkunft: keine Angabe
Posts: 114
      Zitat | Bearbeiten

Ich hatte jetzt zwar noch nie das verlangen auf eine Zeile einen gesammten link zu legen. Aber ohne Javascript gabs ja schon ein paar ansätze.

Wenn du noch dazu möchtest das die gesammte zeile bei einem MouseOver reagiert mach das doch einfach mit CSS. So wie Andavos schon geschrieben hat auf jede Spalte der zeile einen link (ich glaueb da wirst nicht gan rum kommen. und auf jede zeile legst einfach den Hover effekt von css und wenn der User drüber fährt reagiert 1.) die gesamte zeile und 2.) da du auf jeder spalte den selben link hast sollte es so aussehn als ob die gesammte zeile einen link hat.

 PHP  
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:

<html>
    <head>
        <style>
            a { 
                text-decoration: none; 
                 color: black;    
                }
                
            .tr {
                    opacity: 0.55;
                   transition: opacity .25s ease-in-out;
                   -moz-transition: opacity .25s ease-in-out;
                   -webkit-transition: opacity .25s ease-in-out;
                   
                   }

            .tr:hover {
                  
                background:-moz-linear-gradient(bottom,#7fa5b7, #a9daf2); /* Firefox */
                background:-webkit-gradient(linear,left top,left bottom,from(#7fa5b7),to(#a9daf2)); /* Chrome, Safari */
                filter: progid:DXImageTransform.Microsoft.gradient(start
                Colorstr='#7fa5b7',endColorstr='#a9daf2'); /* Internet Explorer */
                     opacity: 1;
                      font-weight: Bold;

                      }            
        </style>
    </head>
    <body>
    
    
    <table>
        <tr class=tr>
            <td>
                <a href=#>Link</a>
            </td>
            <td>
                <a href=#>Link</a>
            </td>
            <td>
                <a href=#>Link</a>
            </td>
            <td>
                <a href=#>Link</a>
            </td>
            <td>
                <a href=#>Link</a>
            </td>
            <td>
                <a href=#>Link</a>
            </td>
        </tr>
        <tr class=tr>
            <td>
                <a href=#>Link</a>
            </td>
            <td>
                <a href=#>Link</a>
            </td>
            <td>
                <a href=#>Link</a>
            </td>
            <td>
                <a href=#>Link</a>
            </td>
            <td>
                <a href=#>Link</a>
            </td>
            <td>
                <a href=#>Link</a>
            </td>
        </tr>
    </table>
    </body>
</html>


15.02.2018, 16:08 Profil | PM | E-Mail  
Seiten (1):  1 
PHP-Support.de » Programmierung » HTML, JavaScript & CSS » Tabelle mit verlinkter Zeile   

Neues Thema | Antworten   


Powered by Command Board 1.0 - Beta 2.0 © 2004-08 PHP-Einfach | Impressum | Datenschutz