如何调整<td>... </td>内容的行间距

本文介绍了如何设置HTML表格的CELLPADDING(内文字与边框间距)和CELLSPACING(表格单元格间距),帮助读者掌握表格布局的基本技能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<table CELLPADDING="5" CELLSPACING="5">

设置CELLPADDING (内文字与边框间距)
设置CELLSPACING (表格单元格间距)

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>个人简历</title> </head> <style> body { background-color: #ffffff; font-family: "宋体"; font-size: 16px; } h1 { font-family: "黑体"; font-size: 30px; text-align: center; } .table-out { border-collapse: collapse; width: 960px; } .table-out td { border: 1px solid black; padding: 10px; } /* 列样式 */ .col-one { width: 150px; background-color: #A0A0A0; font-family: "黑体"; text-align: center; } .col-two { width: 170px; text-align: center; } .col-three { width: 150px; background-color: #A0A0A0; font-family: "黑体"; text-align: center; } .col-four { width: 170px; text-align: center; } .col-five{ width: 150px; text-align: center; } .col-six{ text-align: center; } .evaluate { font-family: Tahoma, "黑体"; } .bg { background-color: #A0A0A0; font-family: "黑体"; } .table-in{ width: 700px; } .table-in td{ border: none; } .table-in td .one{ text-align: left; } .table-in td .two{ text-align: left; } .table-in td .three{ text-align: center; } </style> <body> <form action=""> <h1>个人简历</h1> <table class="table-out" align="center"> <!--第 1 行开始--> <tr> <td class="col-one"> </td> <td class="col-two"> </td> <td class="col-three"> </td> <td class="col-four"> </td> <td colspan="2" rowspan="5"> </td> </tr> <!--第 1 行结束--> <!--第 2 行开始--> <tr> <td class="col-one"> </td> <td class="col-two"> </td> <td class="col-three"> </td> <td class="col-four"> </td> </tr> <!--第 2 行结束--> <!--第 3 行开始--> <tr> <td class="col-one"> </td> <td class="col-two"> </td> <td class="col-three"> </td> <td class="col-four"> </td> </tr> <!--第 3 行结束--> <!--第 4 行开始--> <tr> <td class="col-one"> </td> <td class="col-two"> </td> <td class="col-three"> </td> <td class="col-four"> </td> </tr> <tr> <td class="col-one"> </td> <td class="col-two"> </td> <td class="col-three"> </td> <td class="col-four"> </td> </tr> <tr> <td class="col-one"> </td> <td class="col-two"> </td> <td class="col-three"> </td> <td class="col-four"> </td> <td class="col-five"> </td> <td class="col-six"> </td> </tr> <tr> <td class="col-one"> </td> <td colspan="5"> </td> </tr> <tr> <td class="col-one"> </td> <td colspan="5"> </td> </tr> <tr> <td class="col-one"> </td> <td colspan="5"> </td> </tr> <tr> <td class="col-one"> </td> <td colspan="2"> </td> <td class="col-four bg"> </td> <td colspan="2"> </td> </tr> <tr> <td class="col-one"> </td> <td colspan="2"> </td> <td class="col-four"> </td> <td colspan="2"> </td> </tr> <tr> <td class="col-one"> </td> <td colspan="5"> <table class="table-in"> <tr> <td class="one"> </td> <td class="two"> </td> <td class="three"> </td> </tr> <tr> <td class="one"> </td> <td class="two"> </td> <td class="three"> </td> </tr> <tr> <td class="one"> </td> <td class="two"> </td> <td class="three"> </td> </tr> </table> </td> </tr> <tr> <td class="col-one"> </td> <td colspan="5"> <p class="evaluate"> </p> </td> </tr> <select> <option value="1" selected>汉</option> <option value="2">满</option> <option value="3">蒙</option> <option value="4">回</option> <option value="5">藏</option> </select> <label><input name="hobby" checked="value" disabled="disabled" type="checkbox"/>学习</label> <label><input name="hobby" checked="value" disabled="disabled" type="checkbox"/>网页设计</label> <label><input name="hobby" type="checkbox"/>数据库</label> <label><input name="hobby" type="checkbox"/>苹果开发</label> </table> <table class="table-in"> <tr> <td class="one">2006.1——2006.6</td> <td class="two">xxxx</td> <td class="three">测试人员</td> </tr> <tr> <td class="one">2006.1——2006.6</td> <td class="two">xxxx</td> <td class="three">测试人员</td> </tr> <tr> <td class="one">2006.1——2006.6</td> <td class="two">xxxx</td> <td class="three">测试人员</td> </tr> </table> </form> </body> </html>
最新发布
05-30
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值