HTML中＜table＞中width和height属性的详解（表格）

杨宗健

已于 2022-07-06 15:04:36 修改

阅读量2.6w

点赞数 5

CC 4.0 BY-SA版权

分类专栏： HTML新手学习文章标签： html servlet java

于 2017-03-06 16:50:58 首次发布

本文链接：https://blog.youkuaiyun.com/Ameir_yang/article/details/60581460

HTML新手学习专栏收录该内容

18 篇文章

订阅专栏

本文详细介绍了HTML中<table>元素的width和height属性如何影响表格的尺寸。这两个属性可以调整表格的整体宽度和高度，而<td>标签的width和height则只影响相应单元格的尺寸，且改动会联动影响其他单元格，但不会改变整个表格的width和height。

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

<!DOCTYPE html>
<html>
	<head>
    	<!-- utf-8是每个网站都能识别的字体-->
    	<meta charset="utf-8"> 
        <title>表格属性练习</title>
        <base target="_self">
    </head>
    <body>
    	<!--
        1.高度和宽度只能给table 和 td 使用。 
        2.水平对齐和垂直对齐： 水平对齐：能给table 和tr td 使用。 垂直对齐：tr td使用。
        3.外边距和内边距只能给table使用。
        注意点：px是像素的意思，在定义字体大小和一些元素的宽度、高度用到。
        -->
        
        <!--width和height在table中的使用-->
        <table border="1" width="500px" height="300px"><!--在没有给出宽度和高度的情况下，系统默认给出的宽度和高度是根据表格中填写的数据所控制的，表格中的数据的宽度和高度就是表格的系统默认宽度和高度-->
        	<tr>
            	<td>1.1</td>
                <td>1.2</td>
            </tr>
            <tr>
                <td>2.1</td>
                <td>2.1</td>
            </tr>
        </table>
        <br>
        <br>
        <br>
        <br>
        <!--在td中使用width和height只改变td所对应的单元格的高度和宽度，改变之后只有对应的单元格发生改变，因为要保证表格不变化，所以其他的单元格要发生想一个的改变。-->
        <table border="1" width="500px" height="300px">
        	<tr>
            	<td width="100px">1.1</td><!--只改变第一个单元格的宽度-->
                <td>1.2</td>
            </tr>
            <tr>
            	<td height="200px">2.1</td><!--只改变第三个单元格的高度-->
                <td>2.2</td>
            </tr>
        </table>
    </body>
</html>

总上所述：<table>中使用width和height会改变表格整体的宽度和高度，<td>只改变对应单元格的width和height，改变的同时其他单元格也会发生相应的改变，但是整体表格width与height不变。