web快速入门之基础篇-html:10、表格-常用属性:th、align、valign

目录

一、前言

二、实例演示

实例代码

效果演示

三、知识点说明

常用属性:th/align/valign

1、th 标签

2、align 和 valign 标签


一、前言

上一篇文章我整理以前的笔记是:表格-常用属性:border、width、height,详细可参考博文 web快速入门之基础篇-html:9、表格-常用属性:border、width、height 这篇文章我将整理笔记:表格-常用属性:th、align、valign

二、实例演示

实例代码

我们先来看看一个例子,如下代码:03_th、align、valign.html

扫描二维码关注公众号,回复: 9256747 查看本文章
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<title>这是title标题</title>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	</head>
	<body>

		<h3>---(1)th表头单元格,定义表头内容、td标准单元格,定义常见普通内容---</h3>
		<table border="1" width="300" height="250">
			<tr>
				<th>字母_th</th>
				<th>数字_th</th>
			</tr>
			<tr>
				<td>a_td</td>
				<td>123_td</td>
			</tr>
			<tr>
				<td>c_td</td>
				<td>456_td</td>
			</tr>
		</table><br />
		
		<h3>---(2):align水平布局、valign垂直布局---</h3>
		<table border ="1" width="300" height="250">
		<tr>
			<td >abc</td>
			<td align="middle">bac</td>
			<td align="right">cba</td>
		</tr>
		<tr>
			<td valign="top">bcd</td>
			<td >cdb</td>
			<td valign="bottom">dcb</td>
		</tr>
		</table>
		
	</body>
</html>

效果演示

用谷歌浏览器打开运行,效果如下:

三、知识点说明

常用属性:th/align/valign

1、th 标签

定义表格内的表头单元格。

HTML 表单中有两种类型的单元格:

表头单元格 - 包含表头信息(由 th 元素创建)

标准单元格 - 包含数据(由 td 元素创建)

th 定义表头内容,元素内部的文本通常会呈现为居中的粗体文本,

td 定义普通内容,元素内的文本通常是左对齐的普通文本。

详见:

http://www.w3school.com.cn/tags/tag_th.asp

2、align 和 valign 标签

align:水平布局(默认为左)

valign:垂直布局(默认为中)

发布了284 篇原创文章 · 获赞 46 · 访问量 12万+

猜你喜欢

转载自blog.csdn.net/YuDBL/article/details/104099192