分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 运营维护

前端开发:HTML-表格

发布时间:2023-09-06 02:06责任编辑:熊小新关键词:HTML前端开发前端

HTML 表格

表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

表格实例

<table border="1"> ???<tr> ???????<td>语文</td> ???????<td>数学</td> ???????<td>外语</td> ???</tr> ???<tr> ???????<td>语文</td> ???????<td>数学</td> ???????<td>外语</td> ???</tr></table>

 显示如下:

 

HTML 表格和边框属性

<table border="1">

  

HTML 表格表头

表格的表头使用 <th> 标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本:

 ???<tr> ???????<th>星期一</th> ???????<th>星期二</th> ???????<th>星期三</th> ???????<th>星期四</th> ???????<th>星期五</th> ???</tr>

 

<table border="1"> ???<tr> ???????<th>星期一</th> ???????<th>星期二</th> ???????<th>星期三</th> ???????<th>星期四</th> ???????<th>星期五</th> ???</tr> ???<tr> ???????<td>语文</td> ???????<td>数学</td> ???????<td>外语</td> ???????<td>历史</td> ???????<td>物理</td> ???</tr> ???<tr> ???????<td>语文</td> ???????<td>数学</td> ???????<td>外语</td> ???????<td>化学</td> ???????<td>生物</td> ???</tr></table>

  

 

实例:

没有边框的表格

<table> ????<tr> ???????<th>星期一</th> ???????<th>星期二</th> ???????<th>星期三</th> ???????<th>星期四</th> ???????<th>星期五</th> ???</tr> ???<tr> ???????<td>语文</td> ???????<td>数学</td> ???????<td>外语</td> ???????<td>历史</td> ???????<td>物理</td> ???</tr> ???<tr> ???????<td>语文</td> ???????<td>数学</td> ???????<td>外语</td> ???????<td>化学</td> ???????<td>生物</td> ???</tr></table>

  

带有标题的表格

<table border="1"> ???<caption>课程表</caption> ???<tr> ???????<th>星期一</th> ???????<th>星期二</th> ???????<th>星期三</th> ???????<th>星期四</th> ???????<th>星期五</th> ???</tr> ???<tr> ???????<td>语文</td> ???????<td>数学</td> ???????<td>外语</td> ???????<td>历史</td> ???????<td>物理</td> ???</tr> ???<tr> ???????<td>语文</td> ???????<td>数学</td> ???????<td>外语</td> ???????<td>化学</td> ???????<td>生物</td> ???</tr></table>

  

 单元格合并

<div class="table"> ???<table border="1" cellpadding="0"> ???<!--表格头--> ???????<thead> ???????<!--表格行--> ???????????<tr> ???????????????<th>时间</th> ???????????????<th>星期一</th> ???????????????<th>星期二</th> ???????????????<th>星期三</th> ???????????????<th>星期四</th> ???????????????<th>星期五</th> ???????????</tr> ???????</thead> ???????<tbody> ???????????<!--表格行--> ???????????<tr> ???????????????<!--跨行合并--> ???????????????<td rowspan="3">上午</td> ???????????????<td>语文</td> ???????????????<td>数学</td> ???????????????<td>外语</td> ???????????????<td>历史</td> ???????????????<td>物理</td> ???????????</tr> ???????????<tr> ???????????????<td>语文</td> ???????????????<td>数学</td> ???????????????<td>外语</td> ???????????????<td>化学</td> ???????????????<td>生物</td> ???????????</tr> ???????????<tr> ???????????????<td>语文</td> ???????????????<td>数学</td> ???????????????<td>外语</td> ???????????????<td>化学</td> ???????????????<td>生物</td> ???????????</tr> ???????????<tr> ???????????????<td rowspan="2">下午</td> ???????????????<td>语文</td> ???????????????<td>数学</td> ???????????????<td>外语</td> ???????????????<td>化学</td> ???????????????<td>生物</td> ???????????</tr> ???????????<tr> ???????????????<td>语文</td> ???????????????<td>数学</td> ???????????????<td>外语</td> ???????????????<td>化学</td> ???????????????<td>生物</td> ???????????</tr> ???????</tbody> ???????<!--表格底部--> ???????<tfoot> ???????????<tr> ???????????????<!--跨列合并--> ???????????????<td colspan="6">课程表</td> ???????????</tr> ???????</tfoot></table></div>

  

单元格边距:

<h4>没有单元格边距:</h4><table border="1"> ???<tr> ???????<td>语文</td> ???????<td>数学</td> ???</tr></table><h4>有单元格边距:</h4><table border="1" cellpadding="10"> ???<tr> ???????<td>语文</td> ???????<td>数学</td> ???</tr>

  

HTML 表格标签

前端开发:HTML-表格

原文地址:https://www.cnblogs.com/mike-liu/p/9385296.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved