购物车
登陆 / 注册
微信扫码登陆

推荐手册

HTML 表格

HTML 表格
表格是由 <table> 标签来定义,每个表格的行由 <tr> 标签定义,每行被分割为若干单元格由 <td> 标签定义。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
灭绝小师太 灭绝小师太 更新时间:2019-04-11 14:56:05

让我们一起来学习HTML表格吧

表格是由 <table> 标签来定义,每个表格的行由 <tr> 标签定义,每行被分割为若干单元格由 <td> 标签定义。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

HTML 表格标签

表格描述
<table>定义表格   
<caption>定义表格标题
<th>定义表格的表头
<tr> 
定义表格的行
<td>定义表格单元的列
<thead>定义表格的页眉
<tbody>定义表格的主体
<tfoot>定义表格的页脚
<col>定义用于表格列的属性
<colgroup>定义表格列的组

实例

<body>
    <table border="1">
        <caption>个人信息</caption>
        <tr>
            <td>ID</td>
            <td>姓名</td>
            <td>年龄</td>
            <td>分数</td>
        </tr>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>18</td>
            <td>90</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>20</td>
            <td>88</td>
        </tr>
    </table>
</body>

运行实例 »

点击 "运行实例" 按钮查看在线实例

结果:

表格中的边框属性

如果不定义边框属性,表格将不显示边框

<table border="1"></table>

表格合并

colspan列合并

实例

<table border="1">
<tr>
  <th>姓名</th>
  <th colspan="2">电话</th>
</tr>
<tr>
  <td>张三</td>
  <td>111122233</td>
  <td>444556677</td>
</tr>
</table>

运行实例 »

点击 "运行实例" 按钮查看在线实例

结果:

rowspan行合并

实例

<table border="1">
<tr>
  <th>姓名</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="2">电话</th>
  <td>111112223</td>
</tr>
<tr>
  <td>444445566</td>
</tr>
</table>

运行实例 »

点击 "运行实例" 按钮查看在线实例

结果:

未标题-1.jpg

网站导航
标签地图
学习路径
视频教程
开发软件
旗下子站
php中文网
phpstudy
技术文章
文档工具
关于我们
企业合作
人才招聘
联系我们
讲师招募
QQ交流群
QQ官方交流群
微信公众号
微信公众号