表格實現標題合併程式碼例項
這樣的需求不在少數,比如表格中相鄰的列具有相同的內容,那麼標題就完全可以使用一個,那麼合併標題就是十分重要的,讓使用者感覺也會更加人性化,程式碼例項如下:
[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>
相關文章
- table表格單元格合併程式碼例項
- javascript實現的合併兩個陣列程式碼例項JavaScript陣列
- 表格拖動滾動條標題固定程式碼例項
- table表格單元格橫向和屬性合併程式碼例項
- 實現網頁標題跳動效果程式碼例項網頁
- js實現的網頁標題閃動程式碼例項JS網頁
- td單元格合併程式碼例項
- PE結構-合併節(附例項程式碼)
- jQuery合併兩個陣列程式碼例項jQuery陣列
- js合併兩個陣列程式碼例項JS陣列
- javascript 物件合併程式碼例項簡單分析JavaScript物件
- 網頁標題出現資訊提醒例項程式碼網頁
- table表格美化程式碼例項
- table表格使用程式碼例項
- vuejs實現新增tag標籤程式碼例項VueJS
- js實現的查詢表格中的資料程式碼例項JS
- 滑鼠滑過實現table表格行背景變色程式碼例項
- js table表格排序程式碼例項JS排序
- table細線表格例項程式碼
- css細線表格程式碼例項CSS
- jQuery操作表格table程式碼例項jQuery
- 點選標題實現內容元素伸展和收縮程式碼例項
- jQuery實現的刪除指定標籤程式碼例項jQuery
- 模擬實現文字框游標效果程式碼例項
- js標題title滾動程式碼例項JS
- css合併減少重複程式碼簡單例項CSS單例
- angularJS結合canvas實現的畫圖程式碼例項AngularJSCanvas
- jQuery實現的多個陣列合並程式碼例項jQuery陣列
- table表格隔行變色程式碼例項
- jquery實現的在游標處插入文字程式碼例項jQuery
- css實現梯形程式碼例項CSS
- 127 PHP獲取網頁標題的3種實現方法程式碼例項PHP網頁
- jQuery table表格隔行換色程式碼例項jQuery
- 表格行背景交替變色例項程式碼
- js table表格操作大全程式碼例項JS
- jQuery刪除表格指定行程式碼例項jQuery行程
- 點選刪除表格行程式碼例項行程
- 檢索table表格資料程式碼例項