{"id":12,"date":"2025-11-20T16:30:19","date_gmt":"2025-11-20T08:30:19","guid":{"rendered":"https:\/\/www.52runoob.com\/?p=12"},"modified":"2025-11-20T16:30:19","modified_gmt":"2025-11-20T08:30:19","slug":"html-tablecss%e5%ae%9e%e7%8e%b0%e5%8f%af%e7%bc%96%e8%be%91%e8%a1%a8%e6%a0%bc%e7%9a%84%e7%a4%ba%e4%be%8b%e4%bb%a3%e7%a0%81","status":"publish","type":"post","link":"https:\/\/www.52runoob.com\/index.php\/2025\/11\/20\/html-tablecss%e5%ae%9e%e7%8e%b0%e5%8f%af%e7%bc%96%e8%be%91%e8%a1%a8%e6%a0%bc%e7%9a%84%e7%a4%ba%e4%be%8b%e4%bb%a3%e7%a0%81\/","title":{"rendered":"html table+css\u5b9e\u73b0\u53ef\u7f16\u8f91\u8868\u683c\u7684\u793a\u4f8b\u4ee3\u7801"},"content":{"rendered":"\n

\u8981\u5b9e\u73b0\u4e00\u4e2a\u53ef\u7f16\u8f91\u7684\u8868\u683c\uff0c\u53ef\u4ee5\u4f7f\u7528 HTML \u8868\u683c (<table><\/code>) \u548c CSS \u6837\u5f0f\uff0c\u518d\u7ed3\u5408 JavaScript \u6765\u4f7f\u8868\u683c\u4e2d\u7684\u5355\u5143\u683c\u53ef\u7f16\u8f91\u3002\u4f60\u53ef\u4ee5\u5229\u7528 HTML \u7684 contenteditable<\/code> \u5c5e\u6027\u6765\u5b9e\u73b0\u6bcf\u4e2a\u5355\u5143\u683c\u7684\u7f16\u8f91\u529f\u80fd\u3002<\/p>\n\n\n\n

\u4ee5\u4e0b\u662f\u4e00\u4e2a\u7b80\u5355\u7684\u53ef\u7f16\u8f91\u8868\u683c\u7684\u793a\u4f8b\u4ee3\u7801\uff0c\u5305\u542b\u4e86 HTML\u3001CSS \u548c JavaScript\uff0c\u5141\u8bb8\u7528\u6237\u70b9\u51fb\u8868\u683c\u4e2d\u7684\u5355\u5143\u683c\u8fdb\u884c\u7f16\u8f91\u3002<\/p>\n\n\n\n

\u793a\u4f8b\u4ee3\u7801\uff1a<\/h3>\n\n\n\n

HTML:<\/h4>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>\u53ef\u7f16\u8f91\u8868\u683c<\/title>\n    <link rel=\"stylesheet\" href=\"styles.css\">\n<\/head>\n<body>\n\n    <h2>\u53ef\u7f16\u8f91\u8868\u683c\u793a\u4f8b<\/h2>\n\n    <table class=\"editable-table\">\n        <thead>\n            <tr>\n                <th>\u59d3\u540d<\/th>\n                <th>\u5e74\u9f84<\/th>\n                <th>\u804c\u4e1a<\/th>\n                <th>\u90ae\u7bb1<\/th>\n            <\/tr>\n        <\/thead>\n        <tbody>\n            <tr>\n                <td contenteditable=\"true\">\u5f20\u4e09<\/td>\n                <td contenteditable=\"true\">28<\/td>\n                <td contenteditable=\"true\">\u5de5\u7a0b\u5e08<\/td>\n                <td contenteditable=\"true\">zhangsan@example.com<\/td>\n            <\/tr>\n            <tr>\n                <td contenteditable=\"true\">\u674e\u56db<\/td>\n                <td contenteditable=\"true\">35<\/td>\n                <td contenteditable=\"true\">\u8bbe\u8ba1\u5e08<\/td>\n                <td contenteditable=\"true\">lisi@example.com<\/td>\n            <\/tr>\n            <tr>\n                <td contenteditable=\"true\">\u738b\u4e94<\/td>\n                <td contenteditable=\"true\">42<\/td>\n                <td contenteditable=\"true\">\u4ea7\u54c1\u7ecf\u7406<\/td>\n                <td contenteditable=\"true\">wangwu@example.com<\/td>\n            <\/tr>\n        <\/tbody>\n    <\/table>\n\n    <script src=\"scripts.js\"><\/script>\n<\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\n
CSS (styles.css):<\/h4>\n\n\n\n
body {\n    font-family: Arial, sans-serif;\n    margin: 0;\n    padding: 20px;\n    background-color: #f4f4f4;\n}\n\nh2 {\n    text-align: center;\n}\n\ntable {\n    width: 100%;\n    border-collapse: collapse;\n    margin: 20px 0;\n    background-color: white;\n    border-radius: 8px;\n    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n}\n\nth, td {\n    padding: 10px 15px;\n    border: 1px solid #ddd;\n    text-align: center;\n}\n\nth {\n    background-color: #f7f7f7;\n}\n\ntd[contenteditable=\"true\"]:empty:before {\n    content: \"\u70b9\u51fb\u7f16\u8f91...\";\n    color: #999;\n}\n\ntd[contenteditable=\"true\"]:empty {\n    background-color: #fafafa;\n}\n<\/code><\/pre>\n\n\n\n
JavaScript (scripts.js):<\/h4>\n\n\n\n
\/\/ \u5982\u679c\u9700\u8981\u4fdd\u5b58\u7f16\u8f91\u540e\u7684\u5185\u5bb9\u5230\u672c\u5730\u5b58\u50a8\u6216\u53d1\u9001\u5230\u670d\u52a1\u5668\uff0c\u53ef\u4ee5\u5728\u8fd9\u91cc\u6dfb\u52a0\u4ee3\u7801\ndocument.querySelectorAll('td[contenteditable=\"true\"]').forEach(cell => {\n    cell.addEventListener('input', (e) => {\n        \/\/ \u53ef\u4ee5\u6839\u636e\u9700\u6c42\u5c06\u7f16\u8f91\u5185\u5bb9\u4fdd\u5b58\u6216\u5904\u7406\n        console.log(`\u5185\u5bb9\u5df2\u66f4\u6539: ${e.target.innerText}`);\n    });\n});\n<\/code><\/pre>\n\n\n\n
\u89e3\u91ca\uff1a<\/h3>\n\n\n\n
    \n
  1. HTML<\/strong>:\n