如何让html中的表格左右居中显示

如何让html中的表格左右居中显示,第1张

html中让表格在浏览器中左右居中,可以设置表格的align属性

align有三个属性:

1、居中:center;

2、靠左:left;

3、靠右:right。

html中是没办法实现上下居中的,如果设置上下居中,需要通过js程序来设置。

左右居中代码如下:

<!DOCTYPE html PUBLIC "-//W3C//<a href="https://www.baidu.com/s?wd=DTD&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1d9mWwWuWR4rHbzmyDYnjbY0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3En1R4PH0LnjTv" target="_blank" class="baidu-highlight">DTD</a>XHTML 1.0 <a href="https://www.baidu.com/s?wd=Tr&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1d9mWwWuWR4rHbzmyDYnjbY0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3En1R4PH0LnjTv" target="_blank" class="baidu-highlight">Tr</a>ansitional//EN" "http://www.w3.org/<a href="https://www.baidu.com/s?wd=TR&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1d9mWwWuWR4rHbzmyDYnjbY0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3En1R4PH0LnjTv" target="_blank" class="baidu-highlight">TR</a>/xhtml1/<a href="https://www.baidu.com/s?wd=DTD&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1d9mWwWuWR4rHbzmyDYnjbY0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3En1R4PH0LnjTv" target="_blank" class="baidu-highlight">DTD</a>/xhtml1-<a href="https://www.baidu.com/s?wd=tr&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1d9mWwWuWR4rHbzmyDYnjbY0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3En1R4PH0LnjTv" target="_blank" class="baidu-highlight">tr</a>ansitional.<a href="https://www.baidu.com/s?wd=dtd&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1d9mWwWuWR4rHbzmyDYnjbY0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3En1R4PH0LnjTv" target="_blank" class="baidu-highlight">dtd</a>">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title>无标题文档</title>

</head>

<body>

<table width="400" height="400" border="1" align="center">

<tr align="center" valign="middle">

<td>居中</td>

<td>居中</td>

<td>居中</td>

</tr>

<tr align="center" valign="middle">

<td>居中</td>

<td>居中</td>

<td>居中</td>

</tr>

</table>

</body>

</html>

让html表格文字居中居左,有两种方法:

第一种方法:是表格自身的属性,如下代码:

<table width="100%" border="1">

<tr>

<td colspan="2">求职意向</td>

</tr>

<tr>

<td width="27%" align="center" valign="middle">求职类型</td>

<td width="73%" align="left" valign="middle">网站设计(前,后台)</td>

</tr>

<tr>

<td align="center" valign="middle">求职月薪</td>

<td align="left" valign="middle">2500以上</td>

</tr>

<tr>

<td align="center" valign="middle">希望职业</td>

<td align="left" valign="middle">前台美工</td>

</tr>

<tr>

<td align="center" valign="middle">希望职位</td>

<td align="left" valign="middle">暂无</td>

</tr>

<tr>

<td align="center" valign="middle">希望地区</td>

<td align="left" valign="middle">西安</td>

</tr>

</table>

第二种方法:用样式控制

<table width="100%" border="1">

<tr>

<td colspan="2">求职意向</td>

</tr>

<tr>

<td width="27%" align="center" valign="middle">求职类型</td>

<td width="73%" style="padding-left:20px">网站设计(前,后台)</td>

</tr>

<tr>

<td align="center" valign="middle">求职月薪</td>

<td style="padding-left:20px">2500以上</td>

</tr>

<tr>

<td align="center" valign="middle">希望职业</td>

<td style="padding-left:20px">前台美工</td>

</tr>

<tr>

<td align="center" valign="middle">希望职位</td>

<td style="padding-left:20px">暂无</td>

</tr>

<tr>

<td align="center" valign="middle">希望地区</td>

<td style="padding-left:20px">西安</td>

</tr>

</table>


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/zaji/6165173.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-17
下一篇 2023-03-17

发表评论

登录后才能评论

评论列表(0条)

保存