标签:cal 数据 姓名 htm ble head initial 合并单元格 pre
<!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>
<!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>
<!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>
标签:cal 数据 姓名 htm ble head initial 合并单元格 pre
原文地址:https://www.cnblogs.com/xuweiweiwoaini/p/12416562.html