HTML表格标签基本内容_html设置基本信息填写表格-优快云博客

本文链接：https://blog.youkuaiyun.com/wzc3180043380/article/details/143026739

一.表格标签基本形式及其作用

			
        <table>
             <tr>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
			</tr>
		</table>

以上即为表格标签的基本形式.

表格的两种基本作用:

(1)显示数据

(2)进行简单的网页布局

二.制作表格的基本标签

 <table></table>
 <tr></tr>
 <th></th>
 <td></td>

<table> 为表格标签

<tr>表格中的行

<th>表格的表头(注;表头中的内容居中加粗,其余作用与<td>相同)

<td>表格的单元格

现进行逐步演示,以便于更好理解

首先,创建<table>标签,其中要给<table>标签添加属性border="像素数",使表格能够呈现出来,又因为一般这样打出来的表格很小,所以我们再给其添加属性width="长度",height="高度"

运行得到

然后我们添加"行"<tr>,每添加一个<tr>就代表着在表格中增添一行

然后在添加<td>,原理与<tr>相同.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="1" width="200" height=200"">
			<tr >
			    <td></td>
				<td></td>
				<td></td>
	            <td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
		</table>
	</body>
</html>

该图中可知,有两个<tr>,故表格会有两行,<td>每行中会有两个

这就是表格的基本构建模式,当然实际操做中我们不需要这么麻烦,因为我们有属于HTML的快捷键

以构建4(行)*3(列)的表格为例

直接输入

table>tr*4>td*3(输入完成后直接敲击"Tab"建,就可以生成表格了)

之后就可以在表格中填入自己想要的信息了.

三.表格的细化

众所周知,我们平常生活中见到的表格与上图的结构还是有部分区别的,这时候我们就需要给前文中表格的基本结构中添加一些<属性>,使其更符合我们的预期.

表格的细化所涉及到的基本属性(以下标签为常用部分)

<table>标签相关属性:

cellspacing="单元格间距离"

cellpadding="单元格内容到边框距离"

bordercolor="所有表格框线的颜色"

background="表格背景图链接"

width="长度"

height="高度"

border="边框线宽度像素"(只有添加此项标签时表格框线才会显示出来)

align="水平位置"

valign="垂直位置"

bgcolor="表格背景颜色"