版权声明：转载请注明出处！ https://blog.csdn.net/weixin_34727238/article/details/82885992
表格里的一些照片
现在已经知道关于表格的一些东西、但是表格相比格式化文本而言其实有另外的用处。您可以使用一个表格来创建照片格式化的精美网络。
以后会进行css的学习，进行课程和项目的训练。
练习题：
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
img {
width:100px;
height:100px;
}
table, td {
border: 1px #70b8ff dashed;
}
</style>
<title>我的照片页面</title>
</head>
<body>
<table>
<tr>
<td>
<img src="http://p0.so.qhimgs1.com/bdr/_240_/t011e74bd6013d98004.jpg">
</td>
</tr>
<tr>
<td>
<img src="http://p0.so.qhimgs1.com/bdr/_240_/t011e74bd6013d98004.jpg">
</td>
<td>
<img src="http://p0.so.qhimgs1.com/bdr/_240_/t011e74bd6013d98004.jpg">
</td>
</tr>
<tr>
<td>
<img src="http://p0.so.qhimgs1.com/bdr/_240_/t011e74bd6013d98004.jpg">
</td>
<td>
<img src="http://p0.so.qhimgs1.com/bdr/_240_/t011e74bd6013d98004.jpg">
</td>
<td>
<img src="http://p0.so.qhimgs1.com/bdr/_240_/t011e74bd6013d98004.jpg">
</td>
</tr>
</table>
</body>
</html>结果：
每行
首先做的事情，我们需要创建我们的表格。
说明：
创建一个表格，里面包含三行。
首先，创建你的<table></table>标签，然后把<tbody></tbody>标签放在table标签里面。最后在<tbody></tbody>里面创建<tr></tr>。
练习题：
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
img {
width:100px;
height:100px;
}
table, td {
border: 1px #70b8ff dashed;
}
</style>
<title>我的照片页面</title>
</head>
<body>
<table>
<tbody>
<tr>
<td>
<img src="http://p0.so.qhimgs1.com/bdr/_240_/t011e74bd6013d98004.jpg">
</td>
</tr>
<tr>
<td>
<img src="http://p0.so.qhimgs1.com/bdr/_240_/t011e74bd6013d98004.jpg">
</td>
</tr>
<tr>
<td>
<img src="http://p0.so.qhimgs1.com/bdr/_240_/t011e74bd6013d98004.jpg">
</td>
</tr>
</tbody>
</table>
</body>
</html>结果：
每列
创建3列，加到一起就是九个单元格。
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
img {
width:100px;
height:100px;
}
table, td {
border: 1px #70b8ff dashed;
}
</style>
<title>我的照片页面</title>
</head>
<body>
<table>
<tbody>
<tr>
<td><img src="http://p2.so.qhimgs1.com/bdr/_240_/t012d79c324ab4f4d62.jpg"></td>
<td><img src="http://p2.so.qhimgs1.com/bdr/_240_/t012d79c324ab4f4d62.jpg"></td>
<td><img src="http://p2.so.qhimgs1.com/bdr/_240_/t012d79c324ab4f4d62.jpg"></td>
</tr>
<tr>
<td><img src="http://p2.so.qhimgs1.com/bdr/_240_/t012d79c324ab4f4d62.jpg"></td>
<td><img src="http://p2.so.qhimgs1.com/bdr/_240_/t012d79c324ab4f4d62.jpg"></td>
<td><img src="http://p2.so.qhimgs1.com/bdr/_240_/t012d79c324ab4f4d62.jpg"></td>
</tr>
<tr>
<td><img src="http://p2.so.qhimgs1.com/bdr/_240_/t012d79c324ab4f4d62.jpg"></td>
<td><img src="http://p2.so.qhimgs1.com/bdr/_240_/t012d79c324ab4f4d62.jpg"></td>
<td><img src="http://p2.so.qhimgs1.com/bdr/_240_/t012d79c324ab4f4d62.jpg"></td>
</tr>
</tbody>
</table>
</body>
</html>结果：
