7 HTML5的表格

最新推荐文章于 2025-08-05 17:20:40 发布

weixin_34013044

最新推荐文章于 2025-08-05 17:20:40 发布

阅读量97

点赞数

CC 4.0 BY-SA版权

文章标签： python

原文链接：https://my.oschina.net/iOSliuhui/blog/844362

本文介绍了如何使用HTML5创建基本的表格，包括设置表格、行、列及标题的方法，并通过实例展示了如何设置单元格内文字过长时的显示方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

HTML5制作基本表格

HTML5中一个基本的表格包括"表格(table)","单元格(cell)","列(column)"，"行(row)"

H5设置表格
```
语法：<table border="1"></table>
```
H5设置表格的横行语法： <tr></tr> ，注意这需放在<table></table>的标记里面
H5设置表格直列的数目语法:<td></td>, 注意这需放在<tr></tr>的标记里面
H5设置表格的标题语法：<caption>表格标题</caption>,放在<table>标记之后
H5设置列的标题语法：<th></th>
注意点当单元格内的文字太长放不下来的时候，为了不换行，可以使用<td>标记的nowrap属性
语法练习效果

输入图片说明

参考代码

<!doctype html>

<html>

<head>
<title> 我的博客首页 </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<html lang="zh-CN">
</head>

<body>
   

   <table border="1" bgcolor="red">
   	<caption>博客浏览量</caption>
   	<tr>
   		<th>ios</th>
   		<th>Swift</th>
   		<th>H5</th>
   		<th>Java</th>
   	</tr>

   	<tr>
   		<td nowrap>大家撒时间的撒加班撒办法好久不见啊还是发表回复把部分比较爱不会</td>
   		<td>100次</td>
   		<td>2100次</td>
   		<td>2300次</td>
   	</tr>

   	<tr>
   		<td>10次</td>
   		<td>108次</td>
   		<td>210次</td>
   		<td>200次</td>
   	</tr>

   </table>


</body>

</html>

转载于:https://my.oschina.net/iOSliuhui/blog/844362