답변:
예, 예를 들어 다음과 같이 데이터 그룹을보다 쉽게 스타일 지정하는 데 사용합니다.
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>여기에서 예를 볼 수 있습니다 . 최신 브라우저에서만 작동하지만 현재 응용 프로그램에서 지원하는 것이므로 JavaScript 등의 그룹화를 사용할 수 있습니다. 가장 중요한 것은 행을 시각적으로 그룹화하여 데이터를 훨씬 읽기 쉽게 만드는 편리한 방법입니다 . 물론 다른 용도가 있지만 적용 가능한 한, 이것은 가장 일반적인 것입니다.
<tbody>. 테이블 중첩 을 시작하면 일반적으로 화면 판독기에 실제 탐색 문제가 발생합니다.
<tbody>가 있습니다. 답변에서 설명한 것처럼 여러 요소가 표에서 별도의 그룹을 설명합니다. 또한 일반적으로 배경 셀을 타겟팅하는 것이 더 낫다는 점을 추가해야하므로 CSS는 예를 들어 다음과 같아야합니다.tbody:nth-child(odd) td { background: #f5f5f5; }
:nth-child()연결된 데모에 대한 CSS 사용법 만 참조 하면 여러 <tbody>브라우저에서 작동합니다.
예. 에서 DTD를
<!ELEMENT table
(caption?, (col*|colgroup*), thead?, tfoot?, (tbody+|tr+))>따라서 하나 이상을 기대합니다. 그런 다음 계속 말합니다
테이블 행 그룹간에 규칙 이 필요한 경우 여러 tbody 섹션을 사용하십시오 .
tbody요소가 잘) 남아 있습니다. 특히, 지금있는 사람 넣을 수 tfoot요소를 한 후tbody 처럼 경우 . (그들은 깔끔하게 DTD의 측면 쪽 강화 그들은 하나를 제공하지 않는다고 말함으로써 .) :-)
<tr>일 수도 있으므로 0도 될 수 있습니다 (즉, tbody 또는 tr은 tr이 아니라 tbody 일 수 있음을 의미합니다).
이 예에 따르면 다음과 같이 수행 할 수 있습니다 : w3-struct-tables .
Martin Joiner의 문제는 <caption>태그 에 대한 오해로 인해 발생합니다 .
<caption>태그는 테이블의 캡션을 정의합니다.
<caption>태그의 첫 번째 자식이어야 <table>태그입니다.
테이블 당 하나의 캡션 만 지정할 수 있습니다.
또한 scope특성은 <th>요소가 아닌 요소에 배치해야합니다 <tr>.
멀티 헤더 멀티 tbody 테이블을 작성하는 올바른 방법은 다음과 같습니다.
<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>예. 예를 들어 코스와 같이 테이블의 관련 부분을 동적으로 숨기거나 공개하는 데 사용합니다. 즉.
<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>많은 행을 개별적으로 처리하지 않고 몸통을 조작하여 버튼을 제공하여 모든 것 또는 현재 날짜 만 전환 할 수 있습니다.
편집 : caption태그는 테이블에 속하므로 한 번만 존재해야합니다. 내가 한 것처럼 caption각 tbody요소와 a 를 연결하지 마십시오 .
<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>위의 나쁜 예 : 복사하지 마십시오
위와 같은 예제는 caption태그를 잘못 이해했기 때문에 예상대로 렌더링되지 않습니다 . 표준을 따르지 않기 때문에 올바르게 렌더링하려면 많은 CSS 해킹이 필요합니다.
caption태그 에서 W3Cs 표준을 검색 했지만 caption테이블 당 하나의 요소 만 있어야한다는 사실에 대한 명확한 규칙을 찾을 수 없었지만 실제로는 그렇지 않습니다.
또한 HTML5 DOCTYPE을 사용하여 W3C의 HTML Validator를<tbody> 통해 여러 태그가 있는 HTML 문서를 실행 하면 성공적으로 유효성이 검사됩니다.
JSFiddle 을 만들었습니다. 테이블이있는 두 개의 중첩 된 ng-repeats와 tbody에 부모 ng-repeat가 있습니다. 테이블의 행을 검사하면 6 개의 tbody 요소, 즉 부모 수준이있는 것을 볼 수 있습니다.
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>(참고 : 두 수준에 많은 데이터가있는 경우 DOM을 채 웁니다. 따라서 데이터를 가져 와서 대체하는 지시문을 작성하고 있습니다. 즉 부모를 클릭 할 때 DOM에 추가하고 다른 것을 클릭하거나 동일한 부모를 클릭하면 제거합니다 Prisjakt.nu 에서 찾은 동작을 얻으려면 나열된 컴퓨터로 스크롤하여 행이 아닌 링크를 클릭하면 링크가 아닌 행을 클릭하면 tr이 추가되고 부모를 다시 클릭하거나 다른 항목을 클릭하면 제거됩니다.)
tbody또는 여러 개의 화면 판독기에 문제가됩니까 ?