HTML的學習（7）
阿新 • • 發佈：2018-11-10
表格裡的一些照片
現在已經知道關於表格的一些東西、但是表格相比格式化文字而言其實有另外的用處。您可以使用一個表格來建立照片格式化的精美網路。
以後會進行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>
結果：
