[html]表(表)标签的基础!如何制作表·如何使用TR,TH,TD也是[示例]

在HTML中创建表时使用表格标记。
可以通过简单的机制轻松处理表格标记,但我认为有更多时间使用,因为有很多场景使用。

此页面描述了使用表标记的各种方法。

[对于初学者]仔细解释如何编写CSS(样式表)

表格标签的基本用法

表标记使用TR标签和TD。
表标记TR标签和TD标签嵌套。我认为如果您查看以下代码,很容易理解。

<table>
 <tr>
   <td></td>
 </tr>
 <tr>
   <td></td>
 </tr>
</table>

解释TD,TR

  • TD:细胞内容的描述
  • TR:意味着一行

表标记使用示例

<table>
 <tr>
   <td>たい焼き</td>
   <td>茶色</td>
   <td>あまい</td>
 </tr>
 <tr>
   <td>なし</td>
   <td>黄緑</td>
   <td>甘い</td>
 </tr>
</table>
桌子

这将发生。

表标记指定的属性

您可以在Talbe标记中指定属性并配置表边框。

  • 边框:表外框架边框厚度
  • CellPadding:字母与细胞中的边界之间的间隔
  • CellSpacing:细胞和细胞间隔

每个都可以由px指定。

样本

<table border="2" cellpadding="6" cellspacing="5">
 <tr>
   <td>たい焼き</td>
   <td>茶色</td>
   <td>あまい</td>
 </tr>
 <tr>
   <td>なし</td>
   <td>黄緑</td>
   <td>甘い</td>
 </tr>
</table>
表属性

字幕和描述信息

您可以将标题标记放在表格上的顶部,并在表格上提供信息。

<table border="1" cellpadding="6" cellspacing="0">
 <caption>食べ物について</caption>
  <tr>
    <td>たい焼き</td>
    <td>茶色</td>
    <td>あまい</td>
  </tr>
  <tr>
    <td>なし</td>
    <td>黄緑</td>
    <td>甘い</td>
  </tr>
</table>
标题

关于项目名称th标签

表常见于描述第一行中的项目类型。

使用表格标记表示时,使用TH标签而不是TD标签。 TH标签中的字符以居中和强调。

<table border="1" cellpadding="6" cellspacing="0">
 <caption>食べ物について</caption>
  <tr>
    <th>名前</th>
    <th>色</th>
    <th>味</th>
  </tr>   
  <tr>
    <td>たい焼き</td>
    <td>茶色</td>
    <td>あまい</td>
  </tr>
  <tr>
    <td>なし</td>
    <td>黄緑</td>
    <td>甘い</td>
  </tr>
</table>
TH.

表格标签

您可以先前使用内容创建一个表标记的简单表。
从这里,我们将组合单元格或仅对指定的列或线进行颜色。

结合细胞

如果相邻小区的内容相同,则表格更容易查看您是否将相邻的人员组合在一起。
如果是这样,请指定Rowspan和Colspan的属性。

如果您想安排垂直单元格,Rowspan

<table border="1" cellpadding="6" cellspacing="0">
 <caption>食べ物について</caption>
  <tr>
    <th>名前</th>
    <th>色</th>
    <th>味</th>
  </tr>   
  <tr>
    <td>りんご</td>
    <td>赤</td>
    <td rowspan="2">甘い</td>
  </tr>
  <tr>
    <td>なし</td>
    <td>黄緑</td>
  </tr>
</table>
Rowspan.

在要组合的单元格中的顶级单元格(TD标签)中指定Rowspan属性。

  • Rowspan =.”結合するセルの数”
  • 如果你想安排侧面,科斯邦

    <table border="1" cellpadding="6" cellspacing="0">
     <caption>食べ物について</caption>
      <tr>
        <th>名前</th>
        <th>値段</th>
        <th>味</th>
      </tr>   
      <tr>
        <td>りんご</td>
        <td>200円</td>
        <td>甘い</td>
      </tr>
      <tr>
        <td>トリュフ</td>
        <td colspan="2">買ったこと食べたことないので不明</td>
      </tr>
    </table>
    
    Colspan.

    在要组合的单元格中的最左侧单元格(TD标签)中指定Colspan属性。

  • Colspan. =”結合するセルの数”
  • 列,组线和颜色

    在这里,您将任何列和行分组并将其颜色为该组。
    方式改变了列是否被分组或分组该行。

    首先,我们将解释列的分组。

    分组列时,在表格标记中指定Colgroup元素。

     <table border="1" cellpadding="6" cellspacing="0">
      <caption>食べ物について</caption>
    
       <colgroup style="background:red">
       </colgroup>
       
       <colgroup style="background:skyblue">
       </colgroup>
    
      <tr>
        <td>名前</td>
        <td>値段</td>
        <td>味</td>
      </tr>   
      <tr>
        <td>りんご</td>
        <td>200円</td>
        <td>甘い</td>
      </tr>
     </table>
    
    天蓝色

    因此,如果设置COLGROUP,则列被分组,并且在样式和颜色中指定了背景颜色。
    COLGROUP以指定的顺序组分组第一列和第二列。

    同样在ColGroup标签中

    col span =.”2″

    然后您可以将两列组合在一起。

     <table border="1" cellpadding="6" cellspacing="0">
      <caption>食べ物について</caption>
    
       <colgroup>
          <col span="2" style="background:red">
       </colgroup>
    
      <tr>
        <td>名前</td>
        <td>値段</td>
        <td>味</td>
      </tr>   
      <tr>
        <td>りんご</td>
        <td>200円</td>
        <td>甘い</td>
      </tr>
     </table>
    
    Col Span2.

    您可以以这种方式对两列进行组。

    这将解释分组行的情况。

    排行的分组可以由Tead,T Body和Tfoot除以。
    每个角色如下。

    • Thead:顶行
    • TBODY:在顶部和底部之间的线条(TSEBLY可以指定多个)。
    • Tfoot:底部行

    由于可以指定多个TBAID,因此您可以无限地创建群组。

    每次使用都是将您想要组的行的TR标记括在每个标记中。

    <table border="1" cellpadding="6" cellspacing="0"> 
     <caption>食べ物</caption>
      <thead style="background:red">
       <tr>
        <th>名前</th>
        <th>色</th>
        <th>味</th>
       </tr>
      </thead>
    
      <tbody style="background:yellow">
       <tr>
        <td>りんご</td>
        <td>赤</td>
        <td>甘い</td>
       </tr>
      </tbody>
    
      <tfoot style="background:skyblue">
       <tr>
        <td>たい焼き</td>
        <td>茶色</td>
        <td>甘い</td>
       </tr>
      </tfoot>
    </table>
    
    行组

    这将发生。

    您还可以指定多个TBODY,因此您还发布了一个样本。

    <table border="1" cellpadding="6" cellspacing="0">
      <caption>食べ物</caption>
      <tbody style="background:red">
       <tr>
        <th>名前</th>
        <th>色</th>
        <th>味</th>
       </tr>
      </thead>
    
      <tbody style="background:yellow">
       <tr>
        <td>りんご</td>
        <td>赤</td>
        <td>甘い</td>
       </tr>
      </tbody>
    </table>
    
    托架

    这将发生。

    由于频繁使用列和行分组!

    表格标签

    使用表格标记,您可以轻松地在HTML中创建表。
    在此页面上描述的内容是基本的东西,但在不知道这件事的情况下,很难制作桌子。

    如果您可以使用它,但您可以使用它,编码的速度将更快,您将更有效地工作。非常感谢您需要查看表格标记的内容。

    给这篇文章的人

    自由网络工程师。博客://uetani33.net/