Podemos ter várias <tbody>
tags na mesma <table>
? Se sim, então em quais cenários devemos usar várias <tbody>
tags?
Podemos ter várias <tbody>
tags na mesma <table>
? Se sim, então em quais cenários devemos usar várias <tbody>
tags?
Respostas:
Sim, você pode usá-los, por exemplo, eu os uso para estilizar grupos de dados com mais facilidade, assim:
thead th { width: 100px; border-bottom: solid 1px #ddd; font-weight: bold; }
tbody:nth-child(odd) { background: #f5f5f5; border: solid 1px #ddd; }
tbody:nth-child(even) { background: #e5e5e5; border: solid 1px #ddd; }
<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>
Você pode ver um exemplo aqui . Ele funcionará apenas em navegadores mais novos, mas é isso que estou suportando no meu aplicativo atual, você pode usar o agrupamento para JavaScript etc. O principal é que é uma maneira conveniente de agrupar visualmente as linhas para tornar os dados muito mais legíveis . Existem outros usos, é claro, mas, nos exemplos aplicáveis, este é o mais comum para mim.
<tbody>
. Quando você começa a aninhar tabelas, é isso que geralmente causa problemas reais de navegação para um leitor de tela.
<tbody>
elementos descrevem grupos separados na tabela, como foi explicado na resposta. Também devo acrescentar que geralmente é melhor para células-alvo para os fundos, de modo que o CSS deve ser, por exemplo,tbody:nth-child(odd) td { background: #f5f5f5; }
:nth-child()
uso de CSS para a demonstração vinculada, o múltiplo <tbody>
funcionará em qualquer navegador.
Sim. Do DTD
<!ELEMENT table
(caption?, (col*|colgroup*), thead?, tfoot?, (tbody+|tr+))>
Portanto, espera um ou mais. Em seguida, continua a dizer
Use várias seções de corpo quando forem necessárias regras entre grupos de linhas da tabela.
tbody
elementos são bons) permanece. Especificamente, agora você pode colocar o tfoot
elemento após o tbody
que quiser . dizendo que eles não fornecem um ) :-).
<tr>
modo que também poderia ser zero (ou seja, uma tbody ou um meio tr Poderia ser apenas um tr e nenhum tbody.)
De acordo com este exemplo, isso pode ser feito: w3-struct-tables .
O problema de Martin Joiner é causado por um mal-entendido da <caption>
tag.
A <caption>
tag define uma legenda da tabela.
A <caption>
tag deve ser o primeiro filho da <table>
tag.
Você pode especificar apenas uma legenda por tabela.
Além disso, observe que o scope
atributo deve ser colocado em um <th>
elemento e não em um <tr>
elemento.
A maneira correta de escrever uma tabela com vários cabeçalhos e vários corpos seria algo como isto:
<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>
caption
tag deve seguir a table
tag de abertura . developer.mozilla.org/pt-BR/docs/Web/HTML/Element/table
Sim. Eu os uso para ocultar / revelar dinamicamente a parte relevante de uma tabela, por exemplo, um curso. Viz.
<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>
Um botão pode ser fornecido para alternar entre tudo ou apenas o dia atual, manipulando tbodies sem processar muitas linhas individualmente.
EDIT: A caption
tag pertence à tabela e, portanto, só deve existir uma vez. Não associe a caption
a cada tbody
elemento como eu fiz:
<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>
MAU EXEMPLO ACIMA: NÃO COPIE
O exemplo acima não é renderizado como seria de esperar, porque escrever assim indica um mal-entendido da caption
tag. Você precisaria de muitos hacks CSS para torná-lo renderizado corretamente, porque você iria contra os padrões.
Procurei os padrões W3Cs na caption
tag, mas não consegui encontrar uma regra explícita que afirma que deve haver apenas um caption
elemento por tabela, mas esse é realmente o caso.
Além disso, se você executar um documento HTML com várias <tbody>
tags através do Validador HTML do W3C , com um DOCTYPE HTML5, ele será validado com êxito.
Criei um JSFiddle em que tenho duas repetições ng aninhadas com tabelas e a repetição ng pai em tbody. Se você inspecionar qualquer linha da tabela, verá seis elementos do corpo, ou seja, o nível pai.
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>
(Observação: isso preenche o DOM se você tiver muitos dados nos dois níveis, portanto, estou trabalhando em uma diretiva para buscar dados e substituir, ou seja, adicionando ao DOM ao clicar em pai e removendo quando outro é clicado ou no mesmo pai. Para obter o tipo de comportamento encontrado no Prisjakt.nu , se você rolar para baixo até os computadores listados e clicar na linha (não nos links). Se você fizer isso e inspecionar elementos, verá que um tr é adicionado e removido, se o pai for clicado novamente ou em outro.)
tbody
ou vários?