首页 > web前端 > html教程 > HTML 科尔斯潘

HTML 科尔斯潘

PHPz
发布: 2024-09-04 16:47:53
原创
1266 人浏览过

HTML Colspan 是表格中用于将列划分到单元格中的属性。它允许用户将单个表格单元格划分为一个或多个单元格或列的宽度。 HTML 的此属性用作电子表格中包含的合并单元格选项,与 Excel 相同。该属性用于描述实际列数除以各个列。

colspan 表属性在两个表元素中使用,如

;和 。我们要在 colspan 属性中定义的值必须始终是正整数。它将支持文本区域和框架集元素等属性。

HTML 中的 colspan 属性可以如下使用:

语法:

<td colspan="value">table content…</td>
登录后复制
  • 以上语法状态 标签用于定义要跨越的列的数量。语法中的 value 属性用于评估用于填充单元格的列数。
  • 该值必须是正整数。
  • 语法:

    <th colspan="value">table content…</th>
    登录后复制
    • 当用户想要使用带有 标签的 colspan 属性时,使用上述语法。它定义了跨度的标题单元格的数量。
    • 此属性在 HTML 代码中用作内联属性。
    • HTML cols 属性将支持不同的属性,如文本区域和框架集元素。
    • 语法:

      <ElementName cols="value">……………….</ElementName>
      登录后复制
      • 在上面的语法中,ElementName是HTML元素支持的一种元素。 Value是为frameset属性定义多长度值的属性,而number是为textarea定义的。

      如何在 HTML 中实现 Colspan?

      下面解释colspan在HTML中的代码实现。

      1. HTML 中的 Colspan 使用 标签

      代码:

      <!DOCTYPE html>
      <html>
      <head>
      <title>HTML colspan Attribute with <td> tag</title>
      <style>
      table, th, td {
      border: 2 px solid blue;
      border-collapse: collapse;
      padding: 5px;
      text-align:left;
      }
      </style>
      </head>
      <body>
      <center>
      <h1 style="color: blue;">State With it’s capital </h1>
      <h2>HTML colspan Attribute</h2>
      <table>
      <tr>
      <th>State </th>
      <th>Capital </th>
      </tr>
      <tr>
      <td>Andhra Pradesh</td>
      <td>Hyderabad</td>
      </tr>
      <tr>
      <td>Bihar </td>
      <td>Patna</td>
      </tr>
      <tr>
      <td>Goa </td>
      <td>Panaji</td>
      </tr>
      <tr>
      <td>Maharashtra </td>
      <td>Mumbai </td>
      </tr>
      <tr>
      <td>Nagaland</td>
      <td>Kohima </td>
      </tr>
      <tr>
      <td>Punjab </td>
      <td>Chandigarh </td>
      </tr>
      <tr>
      <td> Gujarat</td>
      <td> Gandhinagar</td>
      </tr>
      <tr>
      <td>Haryana </td>
      <td>Chandigarh </td>
      </tr>
      <tr>
      <td colspan="2">India</td>
      </tr>
      </table>
      </center>
      </body>
      </html>
      登录后复制

      输出:

      HTML 科尔斯潘

      2. HTML 中的 Colspan 使用 标签

      代码:

      <!DOCTYPE html>
      <html>
      <head>
      <title>HTML colspan Attribute</title>
      <style>
      table,
      th,
      td {
      border: 3px solid red;
      border-collapse: collapse;
      }
      </style>
      </head>
      <body>
      <center>
      <h1 style="color: grey;">Population</h1>
      <h2>HTML colspan Attribute with <th> tag</h2>
      <table>
      <tr>
      <th colspan="2">Gender</th>
      </tr>
      <tr>
      <td>Male</td>
      <td>18</td>
      </tr>
      <tr>
      <td>Female</td>
      <td>24</td>
      </tr>
      </table>
      </center>
      </body>
      </html>
      登录后复制

      输出:

      HTML 科尔斯潘

      HTML Colspan 示例

      以下是不同的示例。

      示例#1

      这个示例状态 colspan 属性将与表头以及

      一起使用标签。它将列分为 2 部分,如下例所示:

      HTML 代码:

      <!DOCTYPE html>
      <html>
      <head>
      <style>
      table,
      th,
      td {
      border: 2px solid blue;
      border-collapse: collapse;
      padding:5px;
      }
      </style>
      </head>
      <body>
      <table>
      <h1 style="text-align: center;">Employee Details</h1>
      <tr>
      <th colspan="1"></th>
      <th colspan="2">Software</th>
      <th colspan="2">Hardware</th>
      <th colspan="2">Marketing</th>
      <th colspan="2">HR</th>
      <th colspan="3">Others</th>
      </tr>
      <tr>
      <th >Department</th>
      <th>.NET</th>
      <th>JAVA</th>
      <th>Embedded</th>
      <th>Mechanical</th>
      <th>Indoor</th>
      <th>Outdoor</th>
      <th>Onside</th>
      <th>Offside</th>
      <th>Accounts</th>
      <th>Assets</th>
      <th>Canteen</th>
      </tr>
      <tr>
      <td>Head Person</td>
      <td>John</td>
      <td>Disuja</td>
      <td>Kartik</td>
      <td>Gary</td>
      <td>Sreja</td>
      <td>Divya</td>
      <td>Sandesh</td>
      <td>Krutika</td>
      <td>P. Roy</td>
      <td>Mohan</td>
      <td>Joggy</td>
      </tr>
      <tr>
      <td>Experience(in years)</td>
      <td>17</td>
      <td>12</td>
      <td>8</td>
      <td>7</td>
      <td>12</td>
      <td>11</td>
      <td>5</td>
      <td>9</td>
      <td>7</td>
      <td>12</td>
      <td>5</td>
      </tr>
      <tr>
      <td>No of Teams</td>
      <td>5</td>
      <td>5</td>
      <td>7</td>
      <td>7</td>
      <td>3</td>
      <td>2</td>
      <td>2</td>
      <td>2</td>
      <td>5</td>
      <td>5</td>
      <td>5</td>
      </tr>
      <tr>
      <td>Assigned Projects/Task</td>
      <td>18</td>
      <td>15</td>
      <td>7</td>
      <td>11</td>
      <td>5</td>
      <td>5</td>
      <td>2</td>
      <td>2</td>
      <td>4</td>
      <td>10</td>
      <td>6</td>
      </tr>
      <tr>
      <td>No of employees</td>
      <td>182</td>
      <td>150</td>
      <td>75</td>
      <td>82</td>
      <td>34</td>
      <td>25</td>
      <td>2</td>
      <td>5</td>
      <td>4</td>
      <td>10</td>
      <td>6</td>
      </tr>
      <tr>
      <td>Weekly standup</td>
      <td>Monday</td>
      <td>Monday</td>
      <td>Friday</td>
      <td>Friday</td>
      <td>Tuseday</td>
      <td>Tuseday</td>
      <td>Everyday</td>
      <td>Everyday</td>
      <td>Friday</td>
      <td>Friday</td>
      <td>Friday</td>
      </tr>
      <tr>
      <td>Appriasal Month</td>
      <td>March</td>
      <td>March</td>
      <td>March</td>
      <td>March</td>
      <td>June</td>
      <td>June</td>
      <td>March</td>
      <td>March</td>
      <td>June</td>
      <td>June</td>
      <td>June</td>
      </tr>
      </table>
      </body>
      </html>
      登录后复制

      输出:

      HTML 科尔斯潘

      示例#2

      在这个例子中,我们将解释如何使用 colspan 标签来划分列,以及使用 colspan 标签将生成的实际输出如下:

      HTML 代码:

      <!DOCTYPE html>
      <html>
      <head>
      <title>HTML colspan Attribute</title>
      <style>
      table,
      th,
      td {
      border: 1px solid black;
      border-collapse: collapse;
      padding:8px;
      }
      </style>
      </head>
      <body>
      <center>
      <h1 style="color: greenyellow;">Weather in India</h1>
      <table>
      <tr>
      <th> Temperature  (in degree Celsius)</th>
      </tr>
      <tr>
      <td >Agartala</td>
      <td >17</td>
      </tr>
      <tr>
      <td>Amritsar</td>
      <td>23</td>
      </tr>
      <tr>
      <td>Aurangabad</td>
      <td>26</td>
      </tr>
      <tr>
      <td>Bangalore</td>
      <td>23</td>
      </tr>
      <tr>
      <td>Bhopal</td>
      <td>13</td>
      </tr>
      <tr>
      <td>Chennai</td>
      <td>25</td>
      </tr>
      <tr>
      <td>Delhi</td>
      <td>11</td>
      </tr>
      <tr>
      <td>Haridwar</td>
      <td>8</td>
      </tr>
      <tr>
      <td>Hubbali</td>
      <td>25</td>
      </tr>
      <tr>
      <td>Indore</td>
      <td>15</td>
      </tr>
      <tr>
      <td>Kanyakumari</td>
      <td>28</td>
      </tr>
      <tr>
      <td>Katra</td>
      <td>8</td>
      </tr>
      <tr>
      <td>Mumbai</td>
      <td>26</td>
      </tr>
      <tr>
      <td colspan="2"><b>Average Temperature = 19.07</b></td>
      </tr>
      </table>
      </center>
      </body>
      </html>
      登录后复制

      输出:

      HTML 科尔斯潘

      示例 #3

      在此示例中,我们将在

      和 中使用 colspan HTML 标签。和标签。该属性也允许同时使用两个标签。这是示例的代码,并且将生成相同的输出。

      HTML 代码:

      <!DOCTYPE html>
      <html>
      <head>
      <title>HTML colspan Attribute</title>
      <style>
      table,
      th,
      td {
      border: 2px solid black;
      border-collapse: collapse;
      padding:8px;
      }
      </style>
      </head>
      <body>
      <center>
      <h1 style="color:deepskyblue;">Pune Highlights</h1>
      <table>
      <tr>
      <th colspan="2"> Famous Area in Pune</th>
      </tr>
      <tr>
      <td colspan="1">Koregaon Park</td>
      <td >Kalyani nagar</td>
      </tr>
      <tr>
      <td colspan="1">PMC</td>
      <td >PCMC</td>
      </tr>
      <tr>
      <td colspan="2">Kothrud</td>
      </tr>
      <tr>
      <td colspan="2">Chakan</td>
      </tr>
      <tr>
      <td colspan="1">Vishrantwadi</td>
      <td >Lohgaon</td>
      </tr>
      <tr>
      <td colspan="1">Hadpsar</td>
      <td >Swargate</td>
      </tr>
      <tr>
      <td colspan="1">Decan</td>
      <td >Baner</td>
      </tr>
      <tr>
      <td colspan="1">Bavdhan</td>
      <td >Wakad</td>
      </tr>
      <tr>
      <td colspan="1">Pimpri Chinchwad</td>
      <td >Akurdi</td>
      </tr>
      <tr>
      <td colspan="2" >Vimannagar </td>
      </tr>
      <tr>
      <td colspan="1">Wagholi</td>
      <td >Katraj</td>
      </tr>
      <tr>
      <td colspan="1">Hinjewadi</td>
      <td >Khadkwasla</td>
      </tr>
      <tr>
      <td colspan="1">Camp</td>
      <td >Laxmi Road</td>
      </tr>
      </table>
      </center>
      </body>
      </html>
      登录后复制

      输出:

      HTML 科尔斯潘

      结论

      • 从以上信息中,我们知道 HTML colspan 是表格中将使用的属性,以及文本区域和框架集属性。
      • 它根据用户要求将表格列分为一个或多个单元格。该属性将支持 和 。标签。其中包含的值始终为正整数。

以上是HTML 科尔斯潘的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板