HTML表格

最新推荐文章于 2024-08-21 13:29:36 发布

会编一点点

最新推荐文章于 2024-08-21 13:29:36 发布

阅读量84

点赞数 1

分类专栏：前端HTML 文章标签： html5

本文链接：https://blog.csdn.net/wxfsbkz/article/details/124056184

版权

前端HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

表格一般分为无边框和有边框，在大部分的时候都是有边框

无边框只需要把改成<table border="0">就行了

有表格边框

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
	<table border="1"> //一个像素的边框
		<tr>
			<td>内容1</td>
			<td>内容2</td>
		</tr>
		<tr>
			<td>内容3</td>
			<td>内容4</td>
		</tr>
	</table>
</body>
</html>

效果图

表格标签的加粗和居中

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
	<table border="1">
		<tr>
			<th>文字加粗居中1</th>
			<th>文字加粗居中2</th>
		</tr>
		<tr>
			<td>内容1，内容1，内容1，内容1</td>
			<td>内容2，内容2，内容2，内容2</td>
		</tr>
		<tr>
			<td>内容3，内容3，内容3，内容3</td>
			<td>内容4，内容4，内容4，内容4</td>
		</tr>
	</table>
</body>
</html>

效果图

横跨和列跨的属性表格

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>无标题文档</title> 
</head>
<body>

<h4>单元格跨两列:</h4>
<table border="1">
<tr>
  <th>标题</th>
  <th colspan="2">横跨</th>
</tr>
<tr>
  <td>内容1，内容1</td>
  <td>内容2，内容2</td>
  <td>内容3，内容3</td>
</tr>
</table>

<h4>单元格跨两行:</h4>
<table border="1">
<tr>
  <th>标题</th>
  <td>内容4，内容4</td>
</tr>
<tr>
  <th rowspan="2">列跨，列跨</th>
  <td>内容5，内容5</td>
</tr>
<tr>
  <td>内容6，内容6</td>
</tr>
</table>

</body>
</html>

效果图

下列都是常用的表格标签属性

<table> 定义表格

<th> 定义表格的表头

<tr> 定义表格的行

<td> 定义表格单元

<caption> 定义表格标题

<colgroup> 定义表格的列

<col> 定义用于表格列的属性

<thead> 定义表格的页眉

<tbody> 定义表格的主体

<tfoot> 定义表格的页脚

会编一点点

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML表格

表格一般分为无边框和有边框，在大部分的时候都是有边框无边框只需要把改成<table border="0">就行了有表格边框<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title></head><body> <table border="1"> //一个像素的边框 <t.
复制链接

扫一扫