App下載

怎么讓表格和標(biāo)題合并？使用html5實(shí)現(xiàn)表格與標(biāo)題合并案例詳解！

猿友 2021-08-06 15:40:02 瀏覽數(shù) (3213)
反饋

希望對(duì)大家的學(xué)習(xí)有所幫助！

我們?cè)谑褂胔tml5實(shí)現(xiàn)表格實(shí)現(xiàn)標(biāo)題合并的實(shí)例代碼

這樣的需求不在少數(shù)，比如表格中相鄰的列具有相同的內(nèi)容，那么標(biāo)題就完全可以使用一個(gè)，那么合并標(biāo)題就是十分重要的，讓用戶感覺(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í)！ 

HTML5

0 人點(diǎn)贊