Как я могу отобразить строки в строках в таблице?
Я предпочитаю идти по маршруту № 2 и № 3. Главным образом потому, что № 1 нарушает разделение проблем и смешивает все виды вещей. В конце концов вы обнаружите необходимость иметь конечную точку API, которая не имеет соответствующей HTML-страницы / и т. Д., И вы получите ручей с смешанными конечными точками HTML и JSON в одной и той же базе кода. Это превращается в ужасный беспорядок, даже если его MVP, вам придется переписать его в конце концов, потому что он настолько грязный, что его даже не стоит спасать.
Использование # 2 или # 3 позволяет вам полностью иметь API, который действует одинаково (по большей части) независимо. Это обеспечивает большую гибкость. Я еще не продан на 100% на Backbone / ember / whats / etc.js. Я думаю, это здорово, но, как мы видим в твиттере, это не оптимально. НО ... Твиттер также является огромным зверем компании и имеет сотни миллионов пользователей. Таким образом, любое улучшение может иметь огромное влияние на практический результат в различных областях различных бизнес-единиц. Я думаю, что в этом есть нечто большее, чем просто скорость, и нас это не пускает. Но это только мое мнение. Однако я не сбрасываю со счетов магистраль и его конкурентов. Эти приложения удобны в использовании, очень чисты и очень отзывчивы (по большей части).
Третий вариант также имеет определенную привлекательность. Здесь я следую принципу Парето (правило 80/20) и получаю 20% вашей основной разметки (или наоборот) на сервере, а затем выполняю хороший клиент JS (магистраль / и т. Д.) Для запуска остальной части. , Возможно, вы не на 100% обмениваетесь данными с API REST через JS-клиент, но при необходимости вы будете выполнять некоторую работу, чтобы улучшить работу с suer.
Я думаю, что это одна из тех «это зависит» от вида проблем, и ответ «это зависит» от того, что вы делаете, кому вы служите и какой опыт вы хотите, чтобы они получили , Учитывая, что я думаю, вы можете выбрать между 2 или 3 или гибрид из них.
5 ответов
Вы можете использовать атрибуты Colspan и rowspan, чтобы указать, как далеко каждая ячейка проходит по строкам и столбцам.
Например:
<table>
<tbody>
<tr>
<td rowspan="2">Top Left Header</td>
<td colspan="3">Call Standard</td>
</tr>
<tr>
<td>Flagged</td>
<td>Percent</td>
<td>Days</td>
</tr>
</tbody>
</table>
Обратите внимание, что таблица заканчивается 4 столбцами. Первая строка определяет один столбец, который пересекает 2 строки, и столбец, который пересекает 3 столбца.
Вторая строка просто заполняет «отсутствующие» столбцы; игнорируя первый, потому что он был определен ранее.
Colspan, Rowspan , или Вложение таблиц *.
* вложение таблиц отвратительно, но иногда с ним легче работать, чем со сложными сериями » колпанов и рядов
Для этого можно использовать rowspan и colspan:
<table>
<tr>
<td rowspan="2">Column 1 Heading</td>
<td colspan="3">Call Standard</td>
<td rowspan="2">Column 3 Heading</td>
</tr>
<tr>
<td>Flagged</td>
<td>Percent</td>
<td>Days</td>
</tr>
<tr>
<td>Column 1 Value</td>
<td>4</td>
<td>1%</td>
<td>6</td>
<td>Column 3 Value</td>
</tr>
</table>
Как насчет использования "colspan", как это определено стандартом HTML ? Вы примените его к ячейке, называемой «стандарт вызова», и определите, что она должна охватывать более 3 ячеек.
Вам не обязательно иметь другую внутреннюю таблицу ... вы можете иметь короткую строку как полную строку таблицы и иметь ячейки заголовка, которые не разделяют rowspan , чтобы охватить его (и, соответственно, используйте colspan для верхних и нижних ячеек).