Czy możemy mieć wiele w tym samym?
Czy możemy mieć wiele <tbody>
tagów w tym samym <table>
? Jeśli tak, to w jakich scenariuszach powinniśmy używać wielu znaczników <tbody>
?
8 answers
Tak, możesz ich używać, na przykład używam ich do łatwiejszego stylowania grup danych, jak to:
<table>
<thead>
<tr><th>Customer</th><th>Order</th><th>Month</th></tr>
</thead>
<tbody>
<tr><td>Customer 1</td><td>#1</td><td>January</td></tr>
<tr><td>Customer 1</td><td>#2</td><td>April</td></tr>
<tr><td>Customer 1</td><td>#3</td><td>March</td></tr>
</tbody>
<tbody>
<tr><td>Customer 2</td><td>#1</td><td>January</td></tr>
<tr><td>Customer 2</td><td>#2</td><td>April</td></tr>
<tr><td>Customer 2</td><td>#3</td><td>March</td></tr>
</tbody>
<tbody>
<tr><td>Customer 3</td><td>#1</td><td>January</td></tr>
<tr><td>Customer 3</td><td>#2</td><td>April</td></tr>
<tr><td>Customer 3</td><td>#3</td><td>March</td></tr>
</tbody>
</table>
Następnie możesz je łatwo stylować, TAK:
tbody:nth-child(odd) { background: #f5f5f5; }
tbody:nth-child(even) { background: #e5e5e5; }
Możesz zobaczyć przykład tutaj , będzie działać tylko w nowszych przeglądarkach...ale to jest to, co popieram w mojej obecnej aplikacji, można użyć grupowania dla JavaScript itp. Najważniejsze jest to wygodny sposób wizualnego grupowania wierszy, aby dane były znacznie bardziej czytelne. Są oczywiście inne zastosowania, ale jeśli chodzi o przykłady, to ten jest dla mnie najbardziej powszechny.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-06-19 18:45:14
Tak. Z DTD
<!ELEMENT table
(caption?, (col*|colgroup*), thead?, tfoot?, (tbody+|tr+))>
Więc oczekuje jednego lub więcej. Następnie mówi
Użyj wielu sekcji tbody, gdy reguły są potrzebne między grupami tabeli rzędy.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-06-19 18:29:28
Według tego przykładu można to zrobić: w3-struct-tables.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-08-16 17:16:14
Problem Martina Joinera jest spowodowany niezrozumieniem znacznika <caption>
.
Znacznik <caption>
definiuje podpis tabeli.
Znacznik <caption>
musi być pierwszym potomkiem znacznika <table>
.
Możesz podać tylko jeden podpis w tabeli.
Należy również pamiętać, że atrybut scope
powinien być umieszczony na elemencie <th>
, a nie na elemencie <tr>
.
Prawidłowym sposobem napisania tabeli multi-header multi-tbody byłoby coś takiego:
<table id="dinner_table">
<caption>This is the only correct place to put a caption.</caption>
<tbody>
<tr class="header">
<th colspan="2" scope="col">First Half of Table (British Dinner)</th>
</tr>
<tr>
<th scope="row">1</th>
<td>Fish</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Chips</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Peas</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Gravy</td>
</tr>
</tbody>
<tbody>
<tr class="header">
<th colspan="2" scope="col">Second Half of Table (Italian Dinner)</th>
</tr>
<tr>
<th scope="row">5</th>
<td>Pizza</td>
</tr>
<tr>
<th scope="row">6</th>
<td>Salad</td>
</tr>
<tr>
<th scope="row">7</th>
<td>Oil</td>
</tr>
<tr>
<th scope="row">8</th>
<td>Bread</td>
</tr>
</tbody>
</table>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-02-25 15:34:08
Tak. Używam ich do dynamicznego ukrywania / odsłaniania odpowiedniej części tabeli, np. kursu. A mianowicie
<table>
<tbody id="day1" style="display:none">
<tr><td>session1</td><tr>
<tr><td>session2</td><tr>
</tbody>
<tbody id="day2">
<tr><td>session3</td><tr>
<tr><td>session4</td><tr>
</tbody>
<tbody id="day3" style="display:none">
<tr><td>session5</td><tr>
<tr><td>session6</td><tr>
</tbody>
</table>
Przycisk może być dostarczony, aby przełączać się między wszystkim lub tylko bieżącym dniem, manipulując tbodies bez przetwarzania wielu wierszy pojedynczo.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-03-06 13:47:56
Ponadto, jeśli uruchomisz dokument HTML z wieloma znacznikami <tbody>
za pomocą walidatora HTML W3C z DOCTYPE HTML5, zostanie on pomyślnie zweryfikowany.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-08-15 08:18:30
EDIT: znacznik caption
należy do tabeli i dlatego powinien istnieć tylko raz. Nie należy kojarzyć caption
Z Każdym tbody
elementem tak jak ja:
<table>
<caption>First Half of Table (British Dinner)</caption>
<tbody>
<tr><th>1</th><td>Fish</td></tr>
<tr><th>2</th><td>Chips</td></tr>
<tr><th>3</th><td>Pease</td></tr>
<tr><th>4</th><td>Gravy</td></tr>
</tbody>
<caption>Second Half of Table (Italian Dinner)</caption>
<tbody>
<tr><th>5</th><td>Pizza</td></tr>
<tr><th>6</th><td>Salad</td></tr>
<tr><th>7</th><td>Oil</td></tr>
<tr><th>8</th><td>Bread</td></tr>
</tbody>
</table>
ZŁY PRZYKŁAD POWYŻEJ: NIE KOPIUJ
Powyższy przykład nie renderuje się tak, jak można się spodziewać, ponieważ pisanie w ten sposób wskazuje na nieporozumienie znacznika caption
. Potrzebowałbyś wielu hacków CSS, aby renderował poprawnie, ponieważ działałbyś wbrew standardom.
Szukałem standardów W3Cs na znaczniku caption
, ale nie można znaleźć jednoznacznej reguły, która mówi, że musi być tylko jeden element caption
w tabeli, ale tak jest w rzeczywistości.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-10-05 09:22:54
Utworzyłem JSFiddle Gdzie mam dwa zagnieżdżone ng-repeats z tabelami, a rodzic ng-repeat na tbody. Jeśli sprawdzisz dowolny wiersz w tabeli, zobaczysz, że jest sześć elementów tbody, tj. poziom nadrzędny.
HTML
<div>
<table class="table table-hover table-condensed table-striped">
<thead>
<tr>
<th>Store ID</th>
<th>Name</th>
<th>Address</th>
<th>City</th>
<th>Cost</th>
<th>Sales</th>
<th>Revenue</th>
<th>Employees</th>
<th>Employees H-sum</th>
</tr>
</thead>
<tbody data-ng-repeat="storedata in storeDataModel.storedata">
<tr id="storedata.store.storeId" class="clickableRow" title="Click to toggle collapse/expand day summaries for this store." data-ng-click="selectTableRow($index, storedata.store.storeId)">
<td>{{storedata.store.storeId}}</td>
<td>{{storedata.store.storeName}}</td>
<td>{{storedata.store.storeAddress}}</td>
<td>{{storedata.store.storeCity}}</td>
<td>{{storedata.data.costTotal}}</td>
<td>{{storedata.data.salesTotal}}</td>
<td>{{storedata.data.revenueTotal}}</td>
<td>{{storedata.data.averageEmployees}}</td>
<td>{{storedata.data.averageEmployeesHours}}</td>
</tr>
<tr data-ng-show="dayDataCollapse[$index]">
<td colspan="2"> </td>
<td colspan="7">
<div>
<div class="pull-right">
<table class="table table-hover table-condensed table-striped">
<thead>
<tr>
<th></th>
<th>Date [YYYY-MM-dd]</th>
<th>Cost</th>
<th>Sales</th>
<th>Revenue</th>
<th>Employees</th>
<th>Employees H-sum</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="dayData in storeDataModel.storedata[$index].data.dayData">
<td class="pullright">
<button type="btn btn-small" title="Click to show transactions for this specific day..." data-ng-click=""><i class="icon-list"></i>
</button>
</td>
<td>{{dayData.date}}</td>
<td>{{dayData.cost}}</td>
<td>{{dayData.sales}}</td>
<td>{{dayData.revenue}}</td>
<td>{{dayData.employees}}</td>
<td>{{dayData.employeesHoursSum}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
( Nuta boczna: To wypełnia DOM, jeśli masz dużo danych na obu poziomach, więc pracuję nad dyrektywą, aby pobrać dane i zastąpić, tj. dodając do DOM po kliknięciu rodzica i usuwając, gdy inny jest kliknięty lub sam znowu rodzic. Aby uzyskać takie zachowanie, które znajdziesz na Prisjakt.nu , Jeśli przewiń w dół do wymienionych komputerów i kliknij wiersz (Nie linki). Jeśli to zrobisz i sprawdzisz elementy, zobaczysz, że tr jest dodawany, a następnie usuwany, jeśli rodzic zostanie ponownie kliknięty. )
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-07-31 16:08:43