html表单元素的colspan和rowspan合并单元格

文章目录

  • colspan和rowspan
    • colspan
    • rowspan
  • 代码案例

colspan和rowspan

colspan和rowspan这两个属性用于创建特殊的表格。

colspan

colspan用来指定单元格横向跨越的列数:colspan就是合并列的,colspan=2的话就是合并两列。

rowspan

rowspan用来指定单元格纵向跨越的行数:rowspan就是用来合并行的,比如rowspan=2就是合并两行。

  • rowspan通常使用在td和th标签中
  • row:行,span:跨度,跨距,范围
  • col:列,span:跨度,跨距,范围

代码案例

html表单元素的colspan和rowspan合并单元格_第1张图片


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
head>
<body>
    <table border="1" width="300">
        <caption>标准caption>
    <tr>
        <td>1td>
        <td>2td>
        <td>3td>
    tr>
    <tr>
        <td>4td>
        <td>5td>
        <td>6td>
    tr>
    table>
    <br><br>
    <table border="10">
        <caption>合并caption>
     <tr>
         <td>小组成员td>
         <td colspan="2" align="center">性别td>
         <td>年龄td>
     tr>
     <tr>
         <td align="center">杨小菜td>
         <td>男√td>
         <td>女 td>
         <td>20td>
     tr>
     <tr>
         <td align="center">杨大菜td>
         <td>男 td>
         <td>女√td>
         <td>20td>
     tr>
     <tr>
         <td align="center">张大仙td>
         <td>男 td>
         <td>女√td>
         <td>20td>
     tr>
    <table border="1" width="300">
        <caption>合并第一行的三列caption>
    <tr>
        <td colspan=3>合并第一行的三列td>
    tr>
    <tr>
        <td>4td>
        <td>5td>
        <td>6td>
    tr>
    table>
    br>
    <table border="1" width="300">
         <caption>合并第一行的两列caption>
    <tr>
        <td rowspan="2">合并第一列的两行td>
        <td>2td>
        <td>3td>
    tr>
    <tr>
        <td>5td>
        <td>6td>
    tr>
table>
 table>
body>
html>

你可能感兴趣的:(#,HTML,css,jquery,html)