Tabellenüberschrift <th> als Button

[jonny]

Hallo,

gibt es eine Möglichkeit, einen Tabellenheader als Button zu missbrauchen? Oder ist es besser, den Tabellenheader durch einen <button> Tag zu ersetzen? Dann wäre da nur noch das Problem, dass ich den Button genau so Gestalten möchte, wie bis jetzt mein Header ausschaut :-)

border-style:outset; border-width:4px;

Ist das Möglich?

Mfg,
Jonny

[Cheatah]

Hi,

gibt es eine Möglichkeit, einen Tabellenheader als Button zu missbrauchen?

das hängt davon ab, welche Vorstellung Du mit "Button" assoziierst.

Oder ist es besser, den Tabellenheader durch einen <button> Tag zu ersetzen?

Das ist unmöglich, da <button> nicht in dem Kontext erlaubt ist, in welchem ein <th> vorkommen kann.

Dann wäre da nur noch das Problem, dass ich den Button genau so Gestalten möchte, wie bis jetzt mein Header ausschaut :-)

CSS kennt keinen Unterschied zwischen irgendwelchen Elementen.

Cheatah

[jonny]

Hallo,

das hängt davon ab, welche Vorstellung Du mit "Button" assoziierst.

nun, ich habe eine Tabelle mit etlichen Daten. Wenn ich jetzt die Tabelle nach einer bestimmten Spalte sortieren möchte, wäre es natürlich nicht schlecht, hierfür den Header als Button benutzen zu können. Dem Perlskript übergebe ich dann die Spaltennummer als Argument...

Klar könnte ich auch einfach einen Verweis in den Header schreiben, aber der Button wäre natürlich schöner.

Mfg,
Jonny

[Axel Richter]

Hallo,

Dem Perlskript übergebe ich dann die Spaltennummer als Argument...
Klar könnte ich auch einfach einen Verweis in den Header schreiben, aber der Button wäre natürlich schöner.

Diese Alternativen stehen _so_ nicht.

Wenn Du das Perlscript über ein Formular anfordern willst, dann _muss_ die Tabelle innerhalb eines FORM-Elements stehen und inneralb der TH-Elemente _müssen_ SUBMIT-Buttons sein.

Wenn Du das Perlscript über einen Link anfordern willst, dann _musst_ Du die TH-Elementinhalte verlinken.

Nein, JavaScript ist keine mögliche Alternative.

Das Aussehen der HTML-Elemente (A oder BUTTON oder INPUT) ist fast beliebig mit CSS bestimmbar.

viele Grüße

Axel

[MudGuard]

Hi,

Wenn Du das Perlscript über ein Formular anfordern willst, dann _muss_ die Tabelle innerhalb eines FORM-Elements stehen

Nein.
Es kann auch in jeder th ein eigenes Formular stehen.

cu,
Andreas

[Axel Richter]

Hallo,

Wenn Du das Perlscript über

_ein_

Formular anfordern willst, dann _muss_ die Tabelle innerhalb eines FORM-Elements stehen
Nein.
Es kann auch in jeder th ein eigenes Formular stehen.

Doch.
Sonst ist es nicht mehr _ein_ Formular.

viele Grüße ;-))

Axel

PS: Wenn schon Krümelkacken, dann richtig.

[MudGuard]

Hi,

Wenn Du das Perlscript über
      _ein_
Formular anfordern willst, dann _muss_ die Tabelle innerhalb eines FORM-Elements stehen
Nein.
Es kann auch in jeder th ein eigenes Formular stehen.
Doch.
Sonst ist es nicht mehr _ein_ Formular.

Das Perlscript wird so oder so über EIN Formular angefordert. ;-)

Ob in der HTML-Seite noch weitere Formulare rumgammeln, ist egal.

PS: Wenn schon Krümelkacken, dann richtig.

Eben.

cu,
Andreas

[Axel Richter]

Hallo,

PS: Wenn schon Krümelkacken, dann richtig.
Eben.

Wenn er das Perlscript von einem HTML-Dokument, welches _ein_ _einziges_ Formular enthält, anfordern will, dann _muss_ die Tabelle innerhalb eines FORM-Elements stehen.

viele Grüße ;-))

Axel

[MudGuard]

Hi,

Wenn er das Perlscript von einem HTML-Dokument, welches _ein_ _einziges_ Formular enthält, anfordern will, dann _muss_ die Tabelle innerhalb eines FORM-Elements stehen.

jonny hat nicht gesagt, daß es nur ein Formular geben darf ;-)

cu,
Andreas

[jonny]

Hi,

Wenn er das Perlscript von einem HTML-Dokument, welches _ein_ _einziges_ Formular enthält, anfordern will, dann _muss_ die Tabelle innerhalb eines FORM-Elements stehen.

jonny hat nicht gesagt, daß es nur ein Formular geben darf ;-)

hmmm...

alles was ich will ist, dass ich auf einen Tabellenheader klicke und ich die Spaltennummer an das gleiche Script schicke und die Daten neu sortiert werden. Was ich aber dabei ganz besonders möchte ist der effekt, dass sich der Header bei Klick nach innen bewegt, so wie es ein Button auch macht. Ihr kennt doch alle diese tollen Tabellen, bei denen man auf den Header klickt um nach dieser Spalte sortieren zu können.

Was ich aber auf keinen Fall möchte ist, dann man den Button im Tabellenheader sieht... so zum Beispiel:

-----------------------
|                     |
|   --------------    |
|   | Klick mich |    |
|   --------------    |
|                     |
-----------------------

grauenhaft!

so wär's schon besser

-----------------------
|                     |
|     Klick mich      |
|                     |
-----------------------

Mfg,
Jonny

[MudGuard]

Hi,

Was ich aber auf keinen Fall möchte ist, dann man den Button im Tabellenheader sieht... so zum Beispiel:

Dann mach den Button einfach so groß wie das th.

cu,
Andreas

[jonny]

Hallo Andreas,

Dann mach den Button einfach so groß wie das th.

das wäre eine gute alternative. Nur eine Frage habe ich noch, denn ich möchte nicht umsonst das Script ändern!

Mein TH hat ein bestimmtes Format ... outset ... kann ich das auch auf einen Button anwenden?

Mfg,
Jonny

[jonny]

Dann mach den Button einfach so groß wie das th.

das wäre eine gute alternative. Nur eine Frage habe ich noch, denn ich möchte nicht umsonst das Script ändern!

Mein TH hat ein bestimmtes Format ... outset ... kann ich das auch auf einen Button anwenden?

ah Moment, ich glaube ich habe dich falsch verstanden. Wenn ich den Button so groß wie den Header gestalte, dann sieht man doch bestimmt trotzdem einen doppelten Rand oder?

Wenn ich aber nur einen Button definiere in einer normalen <td> Spalte, kann ich dann den Button so formatieren wie einen Tabellenheader, halt mit outset pixel etc.?

Mfg,
Jonny

[dedlfix]

noch ein Beitrag zum Krümelkacken:

Wenn Du das Perlscript über ein Formular anfordern willst, dann [...] und inneralb der TH-Elemente _müssen_ SUBMIT-Buttons sein.

Nein, es geht auch <input type="image">

:-)

[Axel Richter]

Hallo,

noch ein Beitrag zum Krümelkacken:
Nein, es geht auch <input type="image">

Das _ist_ ein SUBMIT-Button http://www.w3.org/TR/html4/interact/forms.html#submit-button. Deren gibt es:
<input type="submit" name="S1" value="Senden">
<input type="image" name="S2" src="SendeBild" alt="SendeBild">
<button type="submit" name="S1" value="Senden">Senden</button>

viele Grüße

Axel

[jonny]

Hallo Axel,

Wenn Du das Perlscript über ein Formular anfordern willst, dann _muss_ die Tabelle innerhalb eines FORM-Elements stehen und inneralb der TH-Elemente _müssen_ SUBMIT-Buttons sein.

genauso hatte ich das erst gemacht, aber ein Button innerhalb des TH-Elements schaut einfach schreckklich aus!

Wenn Du das Perlscript über einen Link anfordern willst, dann _musst_ Du die TH-Elementinhalte verlinken.

Ich habe jetzt ganz einfach einen Link reingepackt <th><a href ...></a></th>

Nein, JavaScript ist keine mögliche Alternative.

Der liebe Gott bewahre mich davor, in meinem Projekt jemals Javascript nutzen zu müssen :-)

Mfg,
Jonny

[Axel Richter]

Hallo,

genauso hatte ich das erst gemacht, aber ein Button innerhalb des TH-Elements schaut einfach schreckklich aus!

Das könntest Du ja mit CSS ändern. Ältere Opera lassen bei Buttons allerdings nicht viele Formatierngen zu. Für neuere Opera musst Du beim Rahmen etwas tricksen. Z.B. so:

<tr>
 <th><input type="Submit" name="Spalte" value="SpalteA" style="border:1px solid #FFF; background-color:#FFF;"></th>
 <th><input type="Submit" name="Spalte" value="SpalteB" style="border:1px solid #FFF; background-color:#FFF;"></th>
</tr>

Grund: border:0 wird bei Buttons nicht umgesetzt.

Allerdings finde ich es gar nicht so falsch, dass man einer Tabellenkopfzelle, auf die man klicken kann, diese aktive Eigenschaft auch ansieht. So schlimm sieht der Standard-Button denn doch nicht aus.

viele Grüße

Axel

[jonny]

Hi Axel,

<tr>
<th><input type="Submit" name="Spalte" value="SpalteA" style="border:1px solid #FFF; background-color:#FFF;"></th>
<th><input type="Submit" name="Spalte" value="SpalteB" style="border:1px solid #FFF; background-color:#FFF;"></th>
</tr>

Grund: border:0 wird bei Buttons nicht umgesetzt.

das ist natürlich interessant! Daran hatte ich noch nicht gedacht. Aber bei genauem hinschauen erkennt man doch trotzdem ein wenig oder?

Allerdings finde ich es gar nicht so falsch, dass man einer Tabellenkopfzelle, auf die man klicken kann, diese aktive Eigenschaft auch ansieht. So schlimm sieht der Standard-Button denn doch nicht aus.

jo, wie schon geschrieben, eventuell ersetze ich das th Element durch td und schmeisse da nen Button rein. Ich muss mir nur nochmal die Formatierungsmöglichkeiten eines Buttons anschauen... soll ja nett aussehen :-)

Danke für die Info.

Mfg,
Jonny

[jonny]

Hallo,

ich habe nun in die erste Tabellenapalte einen Button gelegt. Nun funktionieren aber meine Anker nicht mehr, mit denen der Skrollbalken wieder an die richtige Position springt. Wie bekomm ich dass denn mit <button> hin, denn meine Tabelle ist horizontal sehr groß und wenn ich nach einer Spalte ganz am Ende sortieren möchte, soll der Skrollbalken natürlich auch wieder dorthin springen.

Mein Button-Container mit dem Versuch, den Anker dort einzubauen, schaut so aus:

<td style="width:80px;"><a name="p"></a>
   <form action="/coolblue/dbsess.cgi">
      <button name="Col" type="submit" value="10#p" style="width:80px;height:30px;">Sid</button>
   </form>
</td>

Das klappt nur leider nicht.

Für Hilfe wäre ich dankbar :-)

Mfg,
Jonny

[MudGuard]

Hi,

ich habe nun in die erste Tabellenapalte einen Button gelegt. Nun funktionieren aber meine Anker nicht mehr, mit denen der Skrollbalken wieder an die richtige Position springt.

<form action="/coolblue/dbsess.cgi">

Wie soll bei dieser action auf einen Anker gesprungen werden? Wird ja keiner erwähnt.

cu,
Andreas

[jonny]

Hallo Andreas,

Wie soll bei dieser action auf einen Anker gesprungen werden? Wird ja keiner erwähnt.

wie genau muss ich denn den Anker defieren? Doch so oder <a name="anker"></a>? Aber wo hänge ich nun den #anker dran? Das weiß ich leider nicht. Kannst du mir helfen?

Mfg,
Jonny

[Detlef G.]

Hallo Jonny

Klar könnte ich auch einfach einen Verweis in den Header schreiben, aber der Button wäre natürlich schöner.

Wenn du wirklich einen Verweis (<th><a href="...">Klick mich</a></th>)
verwenden willst, dann schreib in dein CSS z.B.:

th a {
  display:block;
  padding:0.5em;
  text-decoration:none;
  border:3px outset #aaa;
  background-color:#bbb;
  color:#00;
}
th a:active {
  border-style:inset;
  background-color:#999;
}

Auf Wiederlesen
Detlef

[fastix®]

Moin!

border-style:outset; border-width:4px;
Ist das Möglich?

Das geht, aber warum probierst Du den Einzeiler nicht mal selbst?
Darüber hinaus: was hindert Dich daran, den "header" zu verlinken? Auch Links kann man mittels CSS zu Blockelementen verwandeln (display- Eigenschaft)...

MFFG (Mit freundlich- friedfertigem Grinsen)

fastix®