希望對(duì)大家的學(xué)習(xí)有所幫助!
我們?cè)谑褂胔tml5實(shí)現(xiàn)表格實(shí)現(xiàn)標(biāo)題合并的實(shí)例代碼
這樣的需求不在少數(shù),比如表格中相鄰的列具有相同的內(nèi)容,那么標(biāo)題就完全可以使用一個(gè),那么合并標(biāo)題就是十分重要的,讓用戶(hù)感覺(jué)也會(huì)更加人性化,代碼實(shí)例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>web前端學(xué)習(xí) </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">序號(hào)</th>
<th colspan="2">王五</th>
<th colspan="2">李四</th>
<th colspan="2">孫傳</th>
<th colspan="2">胡平</th>
<th rowspan="2">合計(jì)</th>
</tr>
<tr>
<th>語(yǔ)文</th>
<th>數(shù)學(xué)</th>
<th>語(yǔ)文</th>
<th>數(shù)學(xué)</th>
<th>語(yǔ)文</th>
<th>數(shù)學(xué)</th>
<th>語(yǔ)文</th>
<th>數(shù)學(xué)</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>
總結(jié)
那么以上就是小編今天要給大家介紹的有關(guān)于:“怎么讓表格和標(biāo)題合并?”這個(gè)問(wèn)題的相關(guān)內(nèi)容,在文章我們也講述了實(shí)現(xiàn)使用的方法,希望對(duì)大家有所幫助!那么要是對(duì)于html5有比較感興趣的小伙伴們可以在W3Cschool中進(jìn)行了解學(xué)習(xí)!