表格實現標題合併程式碼例項
這樣的需求不在少數,比如表格中相鄰的列具有相同的內容,那麼標題就完全可以使用一個,那麼合併標題就是十分重要的,讓使用者感覺也會更加人性化,程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> body{ width:98%; height:100%; font-size:12px; background-color:#FCF; text-align:center; } #tab{ width:100%; height:100%; font-size:12px; font-family:Verdana, Geneva, sans-serif Georgia, "Times New Roman", Times, serif; font-weight:bolder; background-color:#9F0; } </style> </head> <body> <table id="tab" cellpadding="1" cellspacing="1" border="1"> <tr> <th rowspan="2">序號</th> <th colspan="2">王五</th> <th colspan="2">李四</th> <th colspan="2">孫傳</th> <th colspan="2">胡平</th> <th rowspan="2">合計</th> </tr> <tr> <th>語文</th> <th>數學</th> <th>語文</th> <th>數學</th> <th>語文</th> <th>數學</th> <th>語文</th> <th>數學</th> </tr> <tr> <th>1</th> <th>78</th> <th>96</th> <th>67</th> <th>98</th> <th>88</th> <th>75</th> <th>94</th> <th>69</th> <th> </th> </tr> <tr> <th>2</th> <th>89</th> <th>68</th> <th>77</th> <th>87</th> <th>84</th> <th>76</th> <th>71</th> <th>87</th> <th> </th> </tr> <tr> <th>3</th> <th>75</th> <th>78</th> <th>89</th> <th>74</th> <th>65</th> <th>68</th> <th>98</th> <th>90</th> <th></th> </tr> <tr> <th>4</th> <th>79</th> <th>89</th> <th>65</th> <th>62</th> <th>64</th> <th>87</th> <th>97</th> <th>91</th> <th></th> </tr> <tr> <th>5</th> <th>89</th> <th>96</th> <th>67</th> <th>76</th> <th>74</th> <th>84</th> <th>67</th> <th>81</th> <th></th> </tr> <tr> <th>6</th> <th>94</th> <th>90</th> <th>97</th> <th>74</th> <th>62</th> <th>81</th> <th>78</th> <th>78</th> <th></th> </tr> <tr> <th>7</th> <th>78</th> <th>89</th> <th>77</th> <th>87</th> <th>45</th> <th>86</th> <th>77</th> <th>98</th> <th></th> </tr> <tr> <th>8</th> <th>65</th> <th>67</th> <th>94</th> <th>68</th> <th>87</th> <th>69</th> <th>78</th> <th>68</th> <th></th> </tr> <tr> <th>9</th> <th>86</th> <th>98</th> <th>87</th> <th>87</th> <th>65</th> <th>78</th> <th>98</th> <th>79</th> <th></th> </tr> <tr> <th>10</th> <th>88</th> <th>75</th> <th>77</th> <th>97</th> <th>97</th> <th>77</th> <th>70</th> <th>87</th> <th></th> </tr> </table> </body> </html>
相關文章
- vuejs實現新增tag標籤程式碼例項VueJS
- table表格美化程式碼例項
- PE結構-合併節(附例項程式碼)
- table細線表格例項程式碼
- 127 PHP獲取網頁標題的3種實現方法程式碼例項PHP網頁
- jQuery table表格隔行換色程式碼例項jQuery
- HTML 使用表單標籤實現註冊頁面的例項程式碼HTML
- JavaScript陣列合並程式碼例項JavaScript陣列
- 例項程式碼分享Python實現Linux監控PythonLinux
- jQuery實現的表格展開伸縮效果例項jQuery
- 生成表格與合併表格
- html實現簡單ListViews效果的例項程式碼HTMLView
- MyCat分片:水平拆分例項解析和程式碼實現!
- 正則實現個位數補零程式碼例項
- python 單一程式例項 實現Python
- [Office] WPS Excel通過新增巨集實現多張表格合併Excel
- 刪除字串中的html標籤程式碼例項字串HTML
- Python物件導向多型實現原理及程式碼例項Python物件多型
- Python實現簡單網頁圖片抓取完整程式碼例項Python網頁
- dom操作程式碼例項
- css梯形程式碼例項CSS
- 螞蟻金服的design Vue表格 動態合併程式碼詳情!Vue
- PHP 圖片的合併,微信小程式碼合併,文字合併PHP微信小程式
- js 表格合併單元格JS
- 表格td單元格合併
- vue表格合併單元格Vue
- 結合例項學習|字元編碼和解碼字元
- JavaScript in運算子程式碼例項JavaScript
- 設計模式例項程式碼設計模式
- 純css tab選項卡程式碼例項CSS
- jQuery tab選項卡效果程式碼例項jQuery
- 深入剖析Vue原始碼 - 選項合併(下)Vue原始碼
- 深入剖析Vue原始碼 - 選項合併(上)Vue原始碼
- 一個線性迴歸例項的公式推導、程式碼實現、問題解析以及模型評價公式模型
- 數學建模例題2.28 矩陣合併示例矩陣
- element中表格合併單元格
- Java 介面實現多型 -- 膝上型電腦綜合例項Java多型
- canvas刮刮樂程式碼例項Canvas
- canvas載入效果程式碼例項Canvas