Example code for implementing table merging using HTML5
There are many such needs. For example, if adjacent columns in a table have the same content, then one title can be used. Then merging titles is very important, making the user feel more humane. The code example is as follows:
<!DOCTYPE html><html><head><meta charset= utf-8><meta name=author content=http://www.softwhy.com/ /><title>Web front-end learning buckle qun: 731771211 daily Sharing technology, academic exchange</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>Serial number</th> <th colspan=2>Wang Wu</th> <th colspan=2>Li Si</th> <th colspan=2>Sun Chuan </th> <th colspan=2>Hu Ping</th> <th rowspan=2>Total</th> </tr> <tr> <th>Chinese</th> <th>Mathematics</th> < th>Chinese</th> <th>Mathematics</th> <th>Chinese</th> <th>Mathematics</th> <th>Chinese</th> <th>Mathematics</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> SummarizeThe above is the example code that the editor introduces to you using HTML5 to realize table merging. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for your support of the VeVb martial arts website!
If you think this article is helpful to you, you are welcome to reprint it, please indicate the source, thank you!