表格的基本设置
Posted xuweiweiwoaini
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了表格的基本设置相关的知识，希望对你有一定的参考价值。
1 表格的概述
- 在web的历史中，html的表格发挥了极大的作用。最初创建表格就是为了以表格的形式显示数据，后来表格变成了一个极受欢迎的布局工具。
- 但是有了css以后，css在布局网页方面实际上会更出色，所以现在我们使用表格的作用只有一个，就是用来表示格式化的数据。
- HTML中的表格可以很复杂，但是通常情况下我们不需要创建过于复杂的表格。
2 <table>、<tr>、<th>、<td>
2.1 概述
- 使用table标签创建一个表格。
- tr标签表示表格的一行。
- tr标签中可以编写一个或者多个td标签。
- th表示表头。
- td表示表格中的一个单元格。
2.2 应用示例
- 示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表格</title> </head> <body> <!-- 在HTML中，使用table标签来创建一个表格 --> <table border="1" width="40%" align="center"> <!-- 在table标签中使用tr来表示表格的一行，有几行就有几个tr --> <tr> <!-- 在tr中使用th来创建表格的标题，有几个标签就有几个td --> <th>姓名</th> <th>省份</th> <th>地址</th> </tr> <tr> <!-- 在tr中使用td来创建一个单元格，有几个单元格就有几个td --> <td>张三</td> <td>北京</td> <td>秘密</td> </tr> <tr> <td>李四</td> <td>江苏</td> <td>不告诉你</td> </tr> </table> </body> </html>
3 合并单元格
3.1 概述
- 合并单元格指的是将两个或两个以上的单元格合并为一个单元格。
- 合并单元格可以通过在th或td中设置属性来完成。
- 横向合并：colspan。
- 纵向合并：rowspan。
3.2 应用示例
- 示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>合并单元格</title> </head> <body> <table border="1" width="40%" align="center"> <tr> <th colspan="2">1</th> <th>2</th> </tr> <tr> <td>3</td> <td>4</td> <td>5</td> </tr> <tr> <td>6</td> <td>7</td> <td>8</td> </tr> </table> </body> </html>
4 表格的样式
4.1 概述
- 之前学习的很多属性都可以用来设置表格的样式，比如color可以用来设置文本的颜色。padding可以设置内容和表格边框的距离。
- text-align：设置文本的水平对齐。
- vertical-align：设置文本的垂直对齐。
- border-spacing：边框间距。
- border-collapse：合并边框。
- 可选值：
- collapse：合并边框。
- separate：不合并边框。
4.2 应用示例
- 示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表格的样式</title> <style type="text/css"> table { /* 设置表格的宽度 */ width: 300px; /* 居中 */ margin: 0 auto; /* 边框 */ /* border: 1px solid black; */ /* table和td之间默认有一个距离，通过border-spacing可以设置这个距离 */ border-spacing: 0; /* border-collapse可以用来设置表格的边框合并， 如果设置了border-collapse则border-spacing自动失效 */ border-collapse: collapse; } table td { /* 边框 */ border: 1px solid black; } </style> </head> <body> <table> <tr> <td>学号</td> <td>姓名</td> <td>性别</td> <td>地址</td> </tr> <tr> <td>1</td> <td>孙悟空</td> <td>男</td> <td>花果山</td> </tr> <tr> <td>2</td> <td>猪八戒</td> <td>男</td> <td>高老庄</td> </tr> <tr> <td>3</td> <td>沙和尚</td> <td>男</td> <td>流沙河</td> </tr> </table> </body> </html>
以上是关于表格的基本设置的主要内容，如果未能解决你的问题，请参考以下文章