【HTML】table表格拆分合并(colspan、rowspan)

代码演示 横向合并:


<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>演示table标记2--单元格合并title>
        <style type="text/css">
            td{
                text-align: center;
            }
        style>
    head>
    <body>
        <table border="1" cellspacing="0" width="50%" height="150">
            <caption>横向合并单元格caption>
        
            <tr> <th colspan="2">姓名和年龄th> <th>电话th> tr>
            <tr> <td>Jacktd> <td>24td> <td>1351234567td>  tr>
            <tr> <td>Tomtd> <td>22td> <td>1351234567td>  tr>
            <tr> <td>Rosetd> <td>22td> <td>1351234567td>  tr>
            <tr> <td>张三td> <td>25td> <td>1351234567td>  tr>
        table>
        <br/>

        <table border="1" cellspacing="0" width="50%" height="150">

运行结果:
【HTML】table表格拆分合并(colspan、rowspan)_第1张图片
代码演示 纵向合并:

<table border="1" cellspacing="0" width="50%" height="150">
            <caption>纵向合并单元格caption>
            <tr><th>班级t> <th>姓名th><th>年龄th> <th>电话th> tr>
            <tr><td rowspan="2">601班td> <td>Jacktd> <td>24td> <td>1351234567td>  tr>
            <tr> <td>Tomtd> <td>22td> <td>1351234567td>  tr>
    
            <tr><td  rowspan="3">602班td> <td>Rosetd> <td>22td> <td>1351234567td>  tr>
            <tr> <td>张三td> <td>25td> <td>1351234567td>  tr>
            <tr> <td>李四td> <td>25td> <td>1351234567td>  tr>
        table>
    body>
html>

【HTML】table表格拆分合并(colspan、rowspan)_第2张图片
原文:https://blog.csdn.net/qq_35415600/article/details/70237433

你可能感兴趣的:(HTML,HTML)