Unterteilen Sie HTML-Tabellenzeilen in beschriftete Abschnitte

Lesezeit: 9 Minuten

Benutzer-Avatar
Yarin

Gibt es eine gültige Möglichkeit, die Zeilen einer Tabelle in Abschnitte zu unterteilen, wobei ein Label diesen Abschnitt identifiziert?

Zum Beispiel so etwas wie der Code unten, aber mit einer Kopfzeile oder Beschriftung am Anfang jedes TBODY (Sieht so aus, als ob Kopfzeilen/Beschriftungen nur oben in einer Tabelle zulässig sind).

<THEAD>
<TR> <TH>Weekday</TH> <TH>Date</TH>  <TH>Manager</TH> </TR>
</THEAD>

<TBODY>
<TR> <TD>Monday</TD>    <TD>09/11/2000</TD> <TD>Kelsey</TD>  </TR>
<TR> <TD>Tuesday</TD>   <TD>09/12/2000</TD> <TD>Lindsey</TD> </TR>
<TR> <TD>Wednesday</TD> <TD>09/13/2000</TD> <TD>Randy</TD>   </TR>
<TR> <TD>Thursday</TD>  <TD>09/14/2000</TD> <TD>Susan</TD>   </TR>
<TR> <TD>Friday</TD>    <TD>09/15/2000</TD> <TD>Randy</TD>   </TR>
<TR> <TD>Saturday</TD>  <TD>09/16/2000</TD> <TD>Lindsey</TD> </TR>
<TR> <TD>Sunday</TD>    <TD>09/17/2000</TD> <TD>Susan</TD>   </TR>
</TBODY>

<TBODY>
<TR> <TD>Monday</TD>    <TD>09/18/2000</TD> <TD>Melody</TD>     </TR>
<TR> <TD>Tuesday</TD>   <TD>09/19/2000</TD> <TD>Christiane</TD> </TR>
<TR> <TD>Wednesday</TD> <TD>09/20/2000</TD> <TD>Symphony</TD>   </TR>
<TR> <TD>Thursday</TD>  <TD>09/21/2000</TD> <TD>Starflower</TD> </TR>
<TR> <TD>Friday</TD>    <TD>09/22/2000</TD> <TD>Miko</TD>       </TR>
<TR> <TD>Saturday</TD>  <TD>09/23/2000</TD> <TD>Cleo</TD>       </TR>
<TR> <TD>Sunday</TD>    <TD>09/24/2000</TD> <TD>Alyx</TD>       </TR>
</TBODY>

<TBODY>
<TR> <TD>Monday</TD>    <TD>09/25/2000</TD> <TD>Dancing Star</TD> </TR>
<TR> <TD>Tuesday</TD>   <TD>09/26/2000</TD> <TD>Dawn</TD>         </TR>
<TR> <TD>Wednesday</TD> <TD>09/27/2000</TD> <TD>Josh</TD>         </TR>
<TR> <TD>Thursday</TD>  <TD>09/28/2000</TD> <TD>Ryan</TD>         </TR>
<TR> <TD>Friday</TD>    <TD>09/29/2000</TD> <TD>Mary Kay</TD>     </TR>
<TR> <TD>Saturday</TD>  <TD>09/30/2000</TD> <TD>Hallie</TD>       </TR>
<TR> <TD>Sunday</TD>    <TD>10/01/2000</TD> <TD>Paul</TD>         </TR>
</TBODY>

</TABLE>

Benutzer-Avatar
Martin Ille

HTML5-Spezifikation heißt nicht, dass es nur einen geben kann <TBODY> Sektion. Dein Code ist in Ordnung. Noch ein Beispiel:

<table>
	<thead>
		<tr>
			<th>Fruits</th>
			<th>Vitamin A</th>
			<th>Vitamin C</th>
		</tr>
   		</thead>		
	<tbody id="section1">
		<tr>
			<th>Apples</th>
			<td>98 ui</td>
			<td>8.4 mg</td>
		</tr>
	</tbody>
	<tbody id="section2">
		<tr>
			<th>Oranges</th>
			<td>295 ui</td>
			<td>69.7 mg</td>
		</tr>
		<tr>
			<th>Bananas</th>
			<td>76 ui</td>
			<td>10.3 mg</td>
		</tr>
	</tbody>
</table>

  • Dies ist eine bessere Antwort als die, die derzeit als Antwort markiert ist – unabhängig davon, ob sich das

    über mehrere Spalten erstreckt oder nicht

    – Christoph König

    14. August 2014 um 16:27 Uhr

  • …mehr als eine <tbody> – nie darüber nachgedacht. Danke. Dies sollte definitiv die markierte Antwort sein.

    – Cheshireoctopus

    29. Januar 2015 um 19:53 Uhr

  • OP sagte “mit einem Etikett, das diesen Abschnitt identifiziert”. Ich habe Ihren Code gefummelt und es gibt keinen visuellen Hinweis darauf, dass die letzten beiden Zeilen zusammengehören. Übersehe ich etwas?

    – Alexander Suraphel

    30. November 2016 um 11:43 Uhr

  • @AlexanderSuraphel Du kannst deine stylen tbody Elemente mit CSS oder Sie können auch eine hinzufügen th Element am Anfang jedes tbody und stylen Sie das entsprechend.

    – Joshua Pinter

    17. September 2017 um 18:16 Uhr

  • Wie sieht es mit der Zugänglichkeit von Labels aus?

    – Arjun

    8. März 2019 um 5:58 Uhr

Meine bevorzugte Art, so etwas zu tun, ist die Verwendung von a <TH> das überspannt (colspan) über eine ganze Reihe.

Als Antwort auf Alexander Suraphels Frage zu Martins Antwort wollte das OP ein identifizierendes Etikett haben. Hier ist eine Möglichkeit, einige der Aspekte mehrerer Antworten zu kombinieren, um dies zu tun. (Beachten Sie, dass ich meine eigenen Etiketten bereitgestellt habe, da das OP nicht angegeben hat, welche Etiketten sie verwendet hätten.)

td {
  border-left: 0;
  border-top: 0;
  border-bottom: 0;
  border-right: 0;
}

table {
  border: none;
  border-collapse: collapse;
}

.grouplabel {
  background: blue;
  color: yellow;
  border: 1px solid blue;
  border-radius: 5px;
}
<table>
        <thead>
                <tr>
                        <th>Fruits</th>
                        <th>Vitamin A</th>
                        <th>Vitamin C</th>
                </tr>
        </thead>

        <tbody id="section1">
        		<tr class="grouplabel"><th colspan="3">Local</th></tr>
                <tr>
                        <th>Apples</th>
                        <td>98 ui</td>
                        <td>8.4 mg</td>
                </tr>
        </tbody>

        <tbody id="section2">
        		<tr class="grouplabel"><th colspan="3">Imported</th></tr>
                <tr>
                        <th>Oranges</th>
                        <td>295 ui</td>
                        <td>69.7 mg</td>
                </tr>
                <tr>
                        <th>Bananas</th>
                        <td>76 ui</td>
                        <td>10.3 mg</td>
                </tr>
        </tbody>
</table>

Benutzer-Avatar
Syd

Verwenden colspan und aus irgendeinem Grund, wenn Sie nicht sicher sind, wie viele Spalten Sie zusammenführen/aufspannen müssen (dynamisch generierte Spalten), verwenden Sie Folgendes:

<tr><td colspan = "100%">...</td></tr>

Im Allgemeinen verwenden die Leute eine zusätzliche Zeile und verwenden colspan über alle Spalten zu spannen.

In Ihrem Fall: <tr><td colspan = "7">...</td></tr>

Benutzer-Avatar
Mue

Ich weiß, die Frage ist alt, aber trotzdem suchte ich auch hier nach einer Antwort. WAS hat eine tolles Beispiel für die Verwendung von multiplizieren <tbody>s mit entsprechenden <th>s.

Bei der Frage würde ich gehen mit:

table {
  min-width: 20rem;
  border-collaps: separate;
}

th {
  text-align: left;
}

tbody th {
  border-bottom: 1px solid;
  padding-top: .625rem;
}
  <TABLE>
    <THEAD>
      <TR>
        <TH scope="col">Weekday</TH>
        <TH scope="col">Date</TH>
        <TH scope="col">Manager</TH>
      </TR>
    </THEAD>
    
    <TBODY>
      <TR>
        <TH scope="rowgroup" colspan="3">Week 1</TH>
      </TR>
      <TR> <TD>Monday</TD>    <TD>09/11/2000</TD> <TD>Kelsey</TD>  </TR>
      <TR> <TD>Tuesday</TD>   <TD>09/12/2000</TD> <TD>Lindsey</TD> </TR>
      <TR> <TD>Wednesday</TD> <TD>09/13/2000</TD> <TD>Randy</TD>   </TR>
      <TR> <TD>Thursday</TD>  <TD>09/14/2000</TD> <TD>Susan</TD>   </TR>
      <TR> <TD>Friday</TD>    <TD>09/15/2000</TD> <TD>Randy</TD>   </TR>
      <TR> <TD>Saturday</TD>  <TD>09/16/2000</TD> <TD>Lindsey</TD> </TR>
      <TR> <TD>Sunday</TD>    <TD>09/17/2000</TD> <TD>Susan</TD>   </TR>
    </TBODY>

    <TBODY>
      <TR>
        <TH scope="rowgroup" colspan="3">Week 2</TH>
      </TR>
      <TR> <TD>Monday</TD>    <TD>09/25/2000</TD> <TD>Dancing Star</TD> </TR>
      <TR> <TD>Tuesday</TD>   <TD>09/26/2000</TD> <TD>Dawn</TD>         </TR>
      <TR> <TD>Wednesday</TD> <TD>09/27/2000</TD> <TD>Josh</TD>         </TR>
      <TR> <TD>Thursday</TD>  <TD>09/28/2000</TD> <TD>Ryan</TD>         </TR>
      <TR> <TD>Friday</TD>    <TD>09/29/2000</TD> <TD>Mary Kay</TD>     </TR>
      <TR> <TD>Saturday</TD>  <TD>09/30/2000</TD> <TD>Hallie</TD>       </TR>
      <TR> <TD>Sunday</TD>    <TD>10/01/2000</TD> <TD>Paul</TD>         </TR>  
    </TBODY>
  </TABLE>

Hoffentlich wird dies für jemanden hilfreich sein.

1140870cookie-checkUnterteilen Sie HTML-Tabellenzeilen in beschriftete Abschnitte

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy

Contact - Terms and Conditions - Privacy Policy