-1
我需要在HTML中構建一個複雜的表格以用於計劃web應用程序。 它應該看起來像這樣： http://s7.postimg.org/f3m25bnuj/schedule_layout.jpg建立複雜的HTML表格的最佳方法
如何在HTML中實現此目的？
哪種方法最適合建立這樣的表格？
「Bootstrap」CSS框架能夠做到這一點嗎？
我的表將有超過12列
A
回答
4
這是一個非常複雜的表格。我建議您使用一些可視化工具（如Dreamweaver）來繪製此表。通過代碼嘗試這樣複雜的表是可能的，但它非常耗時，並且可能導致可能需要重新檢查和重做的錯誤。 Bootstrap具有可應用於表的樣式定義，但通過bootstrap css嘗試此特定表是可能的，但耗時。檢查此jsfiddle：https://jsfiddle.net/brijeshb/zn9eo7uu/
<table width="80%" border="1" cellspacing="1" cellpadding="2">
<tr>
<td width="8%"> </td>
<td width="8%"> </td>
<td width="8%"> </td>
<td width="14%"> </td>
<td width="5%"> </td>
<td width="8%"> </td>
<td width="8%"> </td>
<td width="8%"> </td>
<td width="8%"> </td>
<td width="8%"> </td>
<td width="8%"> </td>
<td width="9%"> </td>
</tr>
<tr>
<td rowspan="21"> </td>
<td rowspan="5"> </td>
<td rowspan="5"> </td>
<td> </td>
<td rowspan="10"> </td>
<td> </td>
<td> </td>
<td rowspan="5"> </td>
<td rowspan="5"> </td>
<td rowspan="5"> </td>
<td rowspan="5"> </td>
<td rowspan="5"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td rowspan="5"> </td>
<td rowspan="5"> </td>
<td> </td>
<td> </td>
<td> </td>
<td rowspan="5"> </td>
<td rowspan="5"> </td>
<td rowspan="5"> </td>
<td rowspan="5"> </td>
<td rowspan="5"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td rowspan="5"> </td>
<td rowspan="5"> </td>
<td> </td>
<td rowspan="5"> </td>
<td> </td>
<td rowspan="5"> </td>
<td rowspan="5"> </td>
<td rowspan="5"> </td>
<td rowspan="5"> </td>
<td rowspan="5"> </td>
<td rowspan="5"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
3
你嘗試過這麼遠嗎？表格不會被推薦用於佈局的目的，它真的取決於幾件事情，例如，你的應用程序需要響應？每個「框」顯示哪些數據？圖片？。
如果我是你，我會嘗試使用一些網格系統下手，但該表的做法是太亂，不適合用於創建類型的佈局。
+0
我的應用程序不需要響應。 每個框都會顯示格式化的文本數據 每一列和每行必須分別具有相同的寬度和高度，才能形成像Excel表格一樣的佈局。 單元格中沒有圖片 –
+0
我可以使用哪個網格系統構建這樣的表格？ 有什麼建議嗎？ –
+0
你並不需要任何特定的網格系統，閱讀這篇文章，你會明白網格方法是最適合你的情況[鏈接]（https://css-tricks.com/dont-overthink - 網格/），並請接受答案作爲正確的答案。 –
2
是的，你可以通過使用列跨度和行跨度屬性做到這一點的HTML。
只能使用表格元素。
「引導」的框架應以實現響應式設計中使用。
在較小的屏幕等的ipad，移動設備，使用下面的文庫以避免失真。
「http://fooplugins.com/plugins/footable-jquery/」
希望它可以幫助！
相關問題
- 1. 處理複雜嵌套表格的最佳方法
- 2. 在Android中創建複雜搜索表單的最佳方法
- 3. 構建複雜的MySQL連接和組的最佳方法？
- 4. 與JS建立JSON的最佳方法
- 5. 在html中創建複雜的表格
- 6. 創建複雜的HTML表格
- 7. 構建複雜NSCompoundPredicate的最佳方法是什麼？
- 8. 爲IOS創建複雜自定義界面的最佳方法
- 9. 用asp.net創建複雜html電子郵件的最佳方法，怎麼樣？
- 10. 在html中處理複雜表單的最佳方法是什麼？
- 11. 循環是建立表格的最佳方式嗎？
- 12. jQuery - 用於創建複雜的HTML片段的最佳實踐
- 13. 從json構建HTML的最佳方法
- 14. 建立這些複雜模型關聯的最佳方式是什麼？
- 15. 複製複雜目錄結構文件的最佳方法
- 16. Symfony2複雜表單的最佳實踐
- 17. 渲染複雜表格行的最有效方法？
- 18. 在HTML中構建複雜表單的正確方法
- 19. 序列化複雜的JSON字符串的最佳方法？
- 20. 解析複雜的非標準字符串的最佳方法？
- 21. 什麼是創建RESTful複雜查詢的最佳方式？
- 22. 在Python中構建「複雜」數據結構的最佳方式
- 23. 將HTML表格解析爲CSV的最佳方法
- 24. 在zend中顯示html表格數據的最佳方法
- 25. 建立非寧靜表格的方法
- 26. 將Excel表格複製到PowerPoint中的最佳方法（2010）？
- 27. 建立在C＃中的複雜佈局[Xamarin表格]
- 28. 什麼是縮放複雜佈局的最佳方法
- 29. 實現複雜首選項屏幕的最佳方法？
- 30. 模擬複雜肥皂響應的最佳方法
消耗的時間對我來說無所謂，我會使用python –
好吧，好吧，那麼你應該繼續前進，給它一個嘗試建立表。建立表格後，您可以將Bootstrap css應用於樣式和響應。 – bbh
謝謝，這個解決方案非常強大，但非常難看。我會保留最壞的情況 –