HTML表格

HTML表格一般用于展示数据给用户查看,因为数据这方面的类容用表格展示会显得更规范

表格实例
名称说明
HTML超文本标记语言
CSS层叠样式表
JavaScript服务器端脚本语言

HTML表格

  • <table>标签定义表格
  • <th>定义表头,表头一般浏览器会居中并且加粗文字
  • <tr>定义表格的行
  • <td>定义表格单元格,每行可分若干个单元格
  • border定义边框厚度

单元格内的数据可以包含文字,图片,列表甚至是套娃再套一个表格都可以,总之表格内是可以包含HTML文档的其它标签的,所以以前很多人用表格来给网页布局

代码示例
<table border="1">
<tr>
<th>诗人</th><th>说明</th>
</tr>
<tr>
<td>李白</td><td>唐代著名浪漫主义诗人</td>
</tr>
<tr>
<td>杜甫</td><td>唐代著名现实主义诗人</td>
</tr>
<tr>
<td>陶渊明</td><td>东晋,田园诗派创始人</td>
</tr>
</table>
代码显示如下
诗人说明
李白唐代著名浪漫主义诗人
杜甫唐代著名现实主义诗人
陶渊明东晋,田园诗派创始人

更多实例

上面只是表格的基本用法,下面是表格一些其它实例,只能把常用的展示出来,没必要的我就不做了

带标题的表格<caption>
<table border="1">
<caption>课本中的那些诗人</caption>
<tr>
<th>诗人</th><th>说明</th>
</tr>
<tr>
<td>李白</td><td>唐代著名浪漫主义诗人</td>
</tr>
<tr>
<td>杜甫</td><td>唐代著名现实主义诗人</td>
</tr>
<tr>
<td>陶渊明</td><td>东晋,田园诗派创始人</td>
</tr>
</table>
代码显示为
课本中的那些诗人
诗人说明
李白唐代著名浪漫主义诗人
杜甫唐代著名现实主义诗人
陶渊明东晋,田园诗派创始人
跨行和跨列的单元格colspan rowspan
<table border="1">
<caption>单元格跨行</caption>
<tr>
  <th>诗人</th>
  <td>说明</td>
</tr>
<tr>
  <th rowspan="2">杜甫</th>
  <td>唐代著名现实主义诗人</td>
</tr>
<tr>
  <td>被后人誉为"诗圣"</td>
</tr>
</table>
<table border="1">
<caption>单元格跨列</caption>
<tr>
  <th>诗人</th>
  <th colspan="2">说明</th>
</tr>
<tr>
  <td>李白</td>
  <td>唐代著名浪漫主义诗人</td>
  <td>被后人誉为"诗仙"</td>
</tr>
</table>
跨行代码显示为
单元格跨行
诗人 说明
杜甫 唐代著名现实主义诗人
被后人誉为"诗圣"
跨列代码显示为
单元格跨列
诗人 说明
李白 唐代著名浪漫主义诗人 被后人誉为"诗仙"
单元格边距与间距 cellpadding cellspacing
<!--单元格边距设为10-->
<table border="1" 
cellpadding="10">
<tr>
  <td>名称</td>
  <td>说明</td>
</tr>   
<tr>
  <td>李白</td>
  <td>唐代著名浪漫主义诗人</td>
</tr>
</table>
<!--单元格间距设为10-->
<table border="1" cellspacing="10">
<tr>
  <td>名称</td>
  <td>说明</td>
</tr>
<tr>
  <td>杜甫</td>
  <td>唐代著名现实主义诗人</td>
</tr>
</table>

总结

上面的实例展示的HTML表格被wordpress添加了css样式所以外观会跟大家测试显示有区别,但是仅仅只是美化,表格基本框架是无变化的,表格的使用方法大概就是这样,表格中放入其它标签我就不展示了,大家可以自行根据上面的基本表格框架然后自行插入其它HTML标签查看效果,使用表格显示数据会显得更规范专业

版权声明:
作者:HONG
链接:https://www.honglog.com/202.html
来源:小洪博客
本站遵循cc共享许可协议:BY-NC-SA 4.0 转载请注明出处
THE END
分享
二维码
打赏
< <上一篇
下一篇>>
文章目录
关闭
目 录