Разделите строки таблицы HTML на помеченные разделы
есть ли действительный способ разделить строки таблицы на разделы с меткой, идентифицирующей этот раздел?
например, что-то вроде кода ниже, но с заголовком или заголовком В начале каждого тела (похоже, заголовок/подписи разрешены только в верхней части таблицы)
<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>
5 ответов
мой предпочтительный способ сделать что-то подобное, чтобы использовать <TH>
что охватывает (colspan
) по всей строке.
спецификация HTML5 не говорит, что может быть только один . Ваш код в порядке. Еще один пример:
<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>
в ответ на вопрос Александра Сурафеля об ответе Мартина, да, ОП хотел иметь идентифицирующий ярлык. Вот один из способов, объединив некоторые аспекты нескольких ответов, сделать это. (Обратите внимание, что я предоставил свои собственные метки, поскольку OP не указал, какие метки они использовали бы.)
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>
обычно люди используют дополнительную строку и используют colspan
для охвата всех столбцов.
в вашем случае: <tr><td colspan = "7">...</td></tr>
использовать colspan
и по какой-то причине, если вы не уверены, как столбцы, которые вам нужно объединить/охватить (динамически генерируемые столбцы), используйте:
<tr><td colspan = "100%">...</td></tr>