HTML中的表格由 <table>标签来定义,表格是由单元格组成的,单元格可以放入文字、图片、表格等内容。下面,我们来看看如何用HTML来制作表格吧。
01代码,先用<table>标签定义一个表格,其中border表示边框,border="1"表示边框为1个像素,数值越大,边框就越粗。
<table border="1">
</table>
02<tr>元素表示表格中的行,比如创建两行
<tr></tr>表示一行。
03单元格
HTML表格的单元格用<td>标签表示,如下图所示:
<td>语文</td>
04表格
就做好一个HTML表格,显示图如下:
总代码:
<body>
<table border="1">
<tr>
<td>语文</td>
<td>数学</td>
</tr>
<tr>
<td>英语</td>
<td>化学</td>
</tr>
特别提示表格的标签:<table>、<tr>、<td>三个标签。
具体的代码可以参考下面这个:<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 500px
height: 500px
background-color: blue
margin: 100px auto
}
</style>
</head>
<body>
</body>
第一个
<table border="1" width="300">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
第二个
<table border="1" width="300">
<tr>
<td colspan="3">合并第一行的三列</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
第三个
<table border="1" width="300">
<tr>
<td rowspan="2">合并第一列的两行</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
</table>
</html>
每一个table分别对应图片上的要求,可以直接使用
1、使用标签<table></table>定义网页的表格,使用style赋值类型将显示在网页。
2、使用<tr>标签定义行,使用<th>定义表头,表头的文字自动加粗。
3、<tr>和<td>标签配合,定义每行中的表格数量,现在定义3行5列的表格。
4、使用<caption></caption>定义表格的标题。
5、表格分为三个部分,表头部,表主体,表尾部。
6、表头部和主体分别放标题和表格的内容,而表的尾部通常放的是页数。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)