微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

html5表格元素

效果

代码

<!DOCTYPE html>
<html lang="zh-cn">
<head>
   <Meta charset="utf-8">
   <title>表格元素</title>
<head>
<body>
<table border="1">
  <tr>///行
     <td>张三</td>///单元格
     <td>男</td>
     <td>未婚</td>
  </tr>
  <tr>
     <td>李四</td>
     <td>女</td>
     <td>已婚</td>
  </tr>
</table>
<br>
<table border="1" style="width:300px;">
  <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>
<br>
<table border="1" style="width:300px;">
  <tr>
     <th rowspan="4">基本情况</th>///纵向合并单元格
     <th>姓名</th>
     <th>性别</th>
     <th>婚否</th>
  </tr>
  <tr>///行
     <td>张三</td>///单元格
     <td>男</td>
     <td>未婚</td>
  </tr>
  <tr>
     <td>李四</td>
     <td>女</td>
     <td>已婚</td>
  </tr>
  <tr>
     <td colspan="3">统计:共两人</td>///横向合并单元格
  </tr>
  
</table>
<br>
///建议以下这么写
<table border="1" style="width:300px;"> 
  <caption>这是一个表格</caption>
  <tfoot>
    <tr>
       <td colspan="3">统计:共两人</td>///横向合并单元格
    </tr>
  </tfoot>
  <tbody>
     <tr>///行
       <td>张三</td>///单元格
       <td>男</td>
       <td>未婚</td>
    </tr>
    <tr>
       <td>李四</td>
       <td>女</td>
       <td>已婚</td>
  </tr>
  </tbody>
  <thead>
    <tr>
       <th>姓名</th>
       <th>性别</th>
       <th>婚否</th>
    </tr>
  </thead>
</table>
<br>///颜色
<table border="1" style="width:300px;">
  <colgroup style="background:white;" span="1"></colgroup>
  <colgroup style="background:red;" span="1"></colgroup>
  <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>
<br>///颜色
<table border="1" style="width:300px;">
  <colgroup>
    <col>///占位符
    <col style="background:red;"
  </colgroup>
  <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>
</body>
<html>
<table>表格
<thead>表头

<tbody>表中数据

<tfoot>表尾

<tcaption>题目

<tr>行

<td>单元格

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。