| 表头单元格（table header） | |

| 表格数据单元格（table data） |

#技术分享 #掘金

HTML 示例：简单的 HTML 表格

<table border="1">

<tr>

<th>姓名</th>

<th>年龄</th>

</tr>

<tr>

<td>张三</td>

<td>25</td>

</tr>

<tr>

<td>李四</td>

<td>30</td>

</tr>

</table>

php 168 Bytes (c) 菜鸟-创作你的创作

在 Python 中动态生成 HTML 表格（Flask 例子）

from flask import Flask, render_template_string
app = Flask(__name__)
@app.route('/')
def table():
    users = [
        {'name': '张三', 'age': 25},
        {'name': '李四', 'age': 30},
    ]
    html = '''
    <table border="1">

<tr><th>姓名</th><th>年龄</th></tr>

{% for user in users %} <tr><td>{{ user.name }}</td><td>{{ user.age }}</td></tr>

{% endfor %} </table>

''' return render_template_string(html, users=users) if __name__ == '__main__': app.run() php 502 Bytes (c) 菜鸟-创作你的创作

HTML 二、HTML 表单 <form>

表单用于向服务器提交数据。

常用子标签：

| 标签 | 说明 | | ---

| | 输入框（文本、密码、按钮等） | | | 多行文本框 | | <select> | 下拉列表 | | <button> | 按钮 | | <label> | 标签，描述输入框 |</p> <h3 style="font-size: 18px; font-weight: bold; margin: 16px 0 8px;">示例：表单提交</h3> <pre class="codehilite"><code class="language-xml"><form action="/submit" method="post"> <label>姓名：</label> <input type="text" name="username"><br> <label>密码：</label> <input type="password" name="password"><br> <input type="submit" value="提交"> </form> php 210 Bytes (c) 菜鸟-创作你的创作 </code></pre> <h3 style="font-size: 18px; font-weight: bold; margin: 16px 0 8px;">Python 在 Python Flask 中处理表单提交</h3> <pre class="codehilite"><code class="language-python">from flask import Flask, request app = Flask(__name__) @app.route('/form') def form_page(): return ''' <form action="/submit" method="post"> 姓名: <input name="username"><br> 密码: <input name="password" type="password"><br> <input type="submit"> </form> ''' @app.route('/submit', methods=['POST']) def submit(): name = request.form['username'] pwd = request.form['password'] return f'你提交的用户名是：{name}，密码是：{pwd}' if __name__ == '__main__': app.run() php 504 Bytes (c) 菜鸟-创作你的创作 </code></pre> <hr /> <h2 style="font-size: 20px; font-weight: bold; margin: 18px 0 9px;">三、自定义标签 <code style="background-color: #f6f8fa; border-radius: 3px; padding: 2px 4px; font-family: monospace;"><div></code> 和 <code style="background-color: #f6f8fa; border-radius: 3px; padding: 2px 4px; font-family: monospace;"><span></code></h2> <p>这两个是 <strong>结构性和样式性标签</strong> ，不会对内容本身产生语义影响。</p> <p>| 标签 | 说明 | | ---</p> <p>| <div> | 块级元素，常用于布局结构 | | <span> | 行内元素，常用于文本样式 |</p> <h3 style="font-size: 18px; font-weight: bold; margin: 16px 0 8px;">示例：使用 <code style="background-color: #f6f8fa; border-radius: 3px; padding: 2px 4px; font-family: monospace;">div</code> 和 <code style="background-color: #f6f8fa; border-radius: 3px; padding: 2px 4px; font-family: monospace;">span</code></h3> <pre class="codehilite"><code class="language-css"><div style="border:1px solid #ccc; padding:10px;"> <span style="color:red;">提示：</span>请输入你的信息。</div> php 103 Bytes (c) 菜鸟-创作你的创作 </code></pre> <hr /> <h2 style="font-size: 20px; font-weight: bold; margin: 18px 0 9px;">四、总结表格</h2> <p>| 标签 | 作用 | 是否换行 | 常见用途 | | ---</p> <p>| <table> | 表格容器 | 否 | 数据表格 | | <tr> | 表格行 | 否 | 每一行数据 | | <th> | 表头单元格 | 否 | 表头 | | <td> | 表格数据单元格 | 否 | 表格中的内容 | | <form> | 表单 | 是 | 数据提交 | | <div> | 块级容器 | 是 | 页面布局 | | <span> | 行内容器 | 否 | 文本内样式控制 |</p> <hr /> <h2 style="font-size: 20px; font-weight: bold; margin: 18px 0 9px;">Python Python 常见使用方式</h2> <p>| 框架 | 用途 | 示例 | | ---</p> <p>| Flask | 生成 HTML 表格或表单 | 使用 render_template_string | | Django | 使用模板渲染表格、表单 | 使用 {{ var }} 结合模板语言 | | Jinja2 | 通用 HTML 模板引擎 | 配合 Flask/Django |</p> <p>--- 如果你希望我结合 <code style="background-color: #f6f8fa; border-radius: 3px; padding: 2px 4px; font-family: monospace;">requests</code> 、<code style="background-color: #f6f8fa; border-radius: 3px; padding: 2px 4px; font-family: monospace;">BeautifulSoup</code> 、<code style="background-color: #f6f8fa; border-radius: 3px; padding: 2px 4px; font-family: monospace;">Selenium</code> 做 <strong>HTML 解析</strong> 或 <strong>表单自动提交</strong> 等 Python 操作，也可以继续问我！
www.52runoob.com/archives/40…</p> </div>