表格基本结构

表格基本结构

在以前,表格不仅仅用来显示数据,还用来进行网页的布局。不过现在基本不再用表格来布局了。HTML中的表格类似Word文档中的表格,有行有列。

表格的制作用到的标记有 <table><tr><td>

  • <table>:表格对象
  • <tr>:行对象
  • <td>:单元格对象

不能直接在 <tr> 里面添加数据,<tr> 里面只能是 <td>,一个 <td> 表示一个单元格,内容数据只能放在 <td> 里面。

HTML中并没有一个叫”列”的标记,列的实现是靠 <td> 来完成的。HTML先用 <table></table> 定义一个表格,然后用 <tr></tr> 定义表格的一行,有多少个 <tr></tr> 就表示有多少行。一个 <tr></tr> 里面可以有很多 <td></td>,有多少个 <td></td> 就有多少个单元格。如果每个 <tr> 里面都有相同数量的 <td>,那么这个表格就是几行几列的工整表格。

一个四行五列的表格示例:

<!DOCTYPE html>
<html>
<head>
<title>标题栏</title>
</head>
<body>
<table>
<tr>
<td>1</td>
<td>1.1</td>
<td>1.1</td>
<td>1.1</td>
<td>1.1</td>
</tr>
<tr>
<td>2</td>
<td>2.1</td>
<td>1.1</td>
<td>1.1</td>
<td>1.1</td>
</tr>
<tr>
<td>3</td>
<td>3.1</td>
<td>1.1</td>
<td>1.1</td>
<td>1.1</td>
</tr>
<tr>
<td>4</td>
<td>4.1</td>
<td>1.1</td>
<td>1.1</td>
<td>1.1</td>
</tr>
</table>
</body>
</html>

说明

  • 在html5中,表格仅有两个属性 colspanrowspan,用来设置单元格的跨行跨列,且这两个属性都属于 <td><tr><table> 在html5中没有属性
  • 表格默认没有边框,行高和列宽需要借助CSS样式设置
  • 现代开发中,表格仅用于展示结构化数据,页面布局使用CSS布局方式(如flexbox、grid)
  • <th> 标记可用于表头单元格,浏览器默认加粗居中显示

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注