当前位置:首页 > Web开发 > 正文

表格的应用

2024-03-31 Web开发

标签:

一、表格标签

1、基本格式:

  每个表格由 table 标签开始。
  每个表格行由 tr 标签开始。
  每个表格数据由 td 标签开始。

例如:

<html> <head> <title>表格标签</title> <meta charset="utf-8"/> </head> <body> <table border="1"> <tr><td>1-1</td><td>1-2</td><td>1-3</td></tr> <tr><td>2-1</td><td>2-2</td><td>2-3</td></tr> <tr><td>3-1</td><td>3-2</td><td>3-3</td></tr> </table> </body> </html>

表格标题:<caption>标签:

表格表头:<th>标签

例如:

<html> <head> <title>表格标签</title> <meta charset="utf-8"/> </head> <body> <table border="1"> <caption>一个表格</caption> <tr><th>1-1</th><td>1-2</td><td>1-3</td></tr> <tr><th>2-1</th><td>2-2</td><td>2-3</td></tr> <tr><th>3-1</th><td>3-2</td><td>3-3</td></tr> </table> </body> </html>

2、属性:

width:表格宽度 height:表格高度 border:边框 cellspacing:是表格里单元格之间的距离 cellpadding:表格里单元格内的空白部分 align:表格水平位置 summary:规定表格的摘要 bgcolor:规定表格的背景颜色(不赞成使用) align: 规定表格现象对周围元素的对齐方式。 值:left center righnt(); <td>的属性: *colspan="列数" *rowspan="行数"

例1(表格边框):

<html> <head> <title>设置表格边框</title> <meta charset="utf-8"/> </head> <body> <h4>表格边框属性:设置无边框</h4> <table> <tr><td>1-1</td><td>1-2</td><td>1-3</td></tr> <tr><td>2-1</td><td>2-2</td><td>2-3</td></tr> <tr><td>3-1</td><td>3-2</td><td>3-3</td></tr> </table> <h4>表格边框属性:设置为border="1"</h4> <table border="1"> <tr><td>1-1</td><td>1-2</td><td>1-3</td></tr> <tr><td>2-1</td><td>2-2</td><td>2-3</td></tr> <tr><td>3-1</td><td>3-2</td><td>3-3</td></tr> </table> <h4>表格边框属性:设置为border="8"</h4> <table border="8"> <tr><td>1-1</td><td>1-2</td><td>1-3</td></tr> <tr><td>2-1</td><td>2-2</td><td>2-3</td></tr> <tr><td>3-1</td><td>3-2</td><td>3-3</td></tr> </table> </body> </html>

例2(跨行跨列表格):

温馨提示: 本文由Jm博客推荐,转载请保留链接: https://www.jmwww.net/file/web/41304.html