HTML系列教材（十九）- 基本元素 - 的表格标签 <table> 详解

HTML系列教材（二十）- 基本元素 - 的无序列表标签<ul>和有序列表标签<ol>

工具版本兼容问题

<table>标签用于显示一个表格
<tr> 表示行
<td> 表示列又叫单元格

纠

示例 1 : 3行2列表格
示例 2 : 带边框的表格
示例 3 : 设置table宽度
示例 4 : 单元格宽度绝对值
示例 5 : 单元格宽度相对值
示例 6 : 单元格水平对齐
示例 7 : 单元格垂直对齐
示例 8 : 横跨两列, 水平合并
示例 9 : 横跨两行, 垂直合并
示例 10 : 背景色

示例 1 :

3行2列表格

edit 顶折

纠问

tr(table row)表示行，所有3个tr元素
td(table data)表示列，每一行，有2列，所以每一个tr元素里，有2个td元素

运行效果

<table>
  <tr>
      <td>1</td>
      <td>2</td>
  </tr>

  <tr>
      <td>3</td>
      <td>4</td>
  </tr>

  <tr>
      <td>a</td>
      <td>b</td>
  </tr>

</table>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 2 :

带边框的表格

edit 顶折

纠问

设置table的属性border

运行效果

<table border="1">
  <tr>
      <td>1</td>
      <td>2</td>
  </tr>

  <tr>
      <td>3</td>
      <td>4</td>
  </tr>

  <tr>
      <td>a</td>
      <td>b</td>
  </tr>

</table>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 3 :

设置table宽度

edit 顶折

纠问

设置table的属性 width
px即像素的意思。
比如你的分辨率是1024X768,则你的屏幕横向就有1024个像素

运行效果

<table border="1" width="200px">
  <tr>
      <td>1</td>
      <td>2</td>
  </tr>

  <tr>
      <td>3</td>
      <td>4</td>
  </tr>

  <tr>
      <td>a</td>
      <td>b</td>
  </tr>

</table>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 4 :

单元格宽度绝对值

edit 顶折

纠问

设置td的属性width
在示例里，1单元格设置了宽度，那么3，和a单元格，自动继承该宽度
2单元格的宽度由table宽度和1单元格的宽度决定

运行效果

<table border="1" width="200px">
  <tr>
      <td width="50px">1</td>
      <td>2</td>
  </tr>

  <tr>
      <td>3</td>
      <td>4</td>
  </tr>

  <tr>
      <td>a</td>
      <td>b</td>
  </tr>

</table>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 5 :

单元格宽度相对值

edit 顶折

纠问

设置td的属性width为百分数

运行效果

<table border="1" width="200px">
  <tr>
      <td width="80%">1</td>
      <td>2</td>
  </tr>

  <tr>
      <td>3</td>
      <td>4</td>
  </tr>

  <tr>
      <td>a</td>
      <td>b</td>
  </tr>

</table>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 6 :

单元格水平对齐

edit 顶折

纠问

设置td的属性align

运行效果

<table border="1" width="200px">
  <tr>
      <td width="50%" align="left">1</td>
      <td>2</td>
  </tr>

  <tr>
      <td align="center">3</td>
      <td>4</td>
  </tr>

  <tr>
      <td align="right">a</td>
      <td>b</td>
  </tr>

</table>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 7 :

单元格垂直对齐

edit 顶折

纠问

设置td的属性valign

运行效果

代码行数较多，请点击查看

<table border="1" width="200px">
  <tr>
      <td width="50%" valign="top" >1</td>
      <td>
             2   <br/>
             2   <br/>
             2   <br/>
      </td>
  </tr>
 
  <tr>
      <td valign="middle"  >3</td>
      <td>
             4   <br/>
             4   <br/>
             4   <br/>
      </td>
  </tr>
 
  <tr>
      <td valign="bottom" >a</td>
      <td>
             b   <br/>
             b   <br/>
             b   <br/>
      </td>
  </tr>
 
</table>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 8 :

横跨两列, 水平合并

edit 顶折

纠问

设置td的属性colspan

运行效果

<table border="1" width="200px">
  <tr>
      <td colspan="2" >1，2</td>
  </tr>

  <tr>
      <td>3</td>
      <td>4</td>
  </tr>

  <tr>
      <td>a</td>
      <td>b</td>
  </tr>

</table>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 9 :

横跨两行, 垂直合并

edit 顶折

纠问

设置td的属性rowspan

运行效果

<table border="1" width="200px">
  <tr>
      <td rowspan="2">1,3</td>
      <td>2</td>
  </tr>

  <tr>
      <td>4</td>
  </tr>

  <tr>
      <td>a</td>
      <td>b</td>
  </tr>

</table>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 10 :

背景色

edit 顶折

纠问

设置tr或者td的属性bgcolor

运行效果

<table border="1" width="200px">
  <tr bgcolor="gray">
      <td width="50%">1</td>
      <td>2</td>
  </tr>

  <tr>
      <td>3</td>
      <td>4</td>
  </tr>

  <tr>
      <td>a</td>
      <td  bgcolor="pink">b</td>
  </tr>

</table>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

HTML系列教材（十八）- 基本元素 - 的超链标签 <a> 详解是

HTML系列教材（二十）- 基本元素 - 的无序列表标签<ul>和有序列表标签<ol>

HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。

问答区域

2023-02-12 笔记小常识

不安分的

关于前端部分-HTML-表格的提问

笔记展示

<!--<table>标签用于显示一个表格
<tr> 表示行
<td> 表示列又叫单元格-->

<table border="1.5" width="300px">
<tr>
<td width="80px" valign="top" rowspan="2">上午 </td>
<td align="center">星期一</td>
<td align="center">星期二</td>
<td align="center">星期三</td>
</tr>

<tr>

<td align="center"> <br/>X <br/> <br/></td>
<td bgcolor="pink">          </td>
<td align="center">X</td>
</tr>
<tr>
<td align="center" valign="middle" colspan="2">下午</td>

<td align="center"> <br/> O <br/>  <br/> </td>
<td align="center">X</td>
</tr>
<tr>
<td align="right" valign="bottom">晚上</td>
<td align="center" bgcolor="aqua"> <br/> O<br/> <br/> </td>
<td align="center" bgcolor="aqua">O</td>
<td align="center" bgcolor="aqua">O</td>
</tr>

</table>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2020-11-30 有点不明白border的1是什么意思

崩崩青花鱼

关于前端部分-HTML-表格的提问

有点不明白border的1是什么意思

<table border="1">
  <tr>
      <td>1</td>
      <td>2</td>
  </tr>
 
  <tr>
      <td>3</td>
      <td>4</td>
  </tr>
 
  <tr>
      <td>a</td>
      <td>b</td>
  </tr>
 
</table>

4 个答案

LittleWhiteApe
答案时间：2021-05-23

border：表示表格边框的宽度，你可以自己将里面的数值更改，进行比较就会发现

人人都需要加油
答案时间：2021-03-26

边框大小像素为1

zaiwoshenbian66
答案时间：2020-12-15

表单边框的大小

a124376131
答案时间：2020-12-05

指边框的大小

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2020-07-09 实现

2019-12-23 小企业的前端Time-HTML 表格

小企业哒

关于前端部分-HTML-表格的提问

留下足迹

<h2>
    HTML 表格
</h2>

<p>1.3行2列的表格</p>
<table>
  <tr>
      <td>1</td>
      <td>2</td>
  </tr>
 
  <tr>
      <td>3</td>
      <td>4</td>
  </tr>
 
  <tr>
      <td>a</td>
      <td>b</td>
  </tr>
</table>

<p>2.带边框的表格</p>

<table border="1">
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
    
    <tr>
    	<td>3</td>
        <td>4</td>
    </tr>
    
    <tr>
    	<td>a</td>
        <td>b</td>
    </tr>
</table>

<p>3.设置table宽度</p>

<table border="1" width="200px">
    <tr>
    	<td>1</td>
        <td>2</td>
    </tr>
    
    <tr>
    	<td>3</td>
        <td>4</td>
    </tr>
    
    <tr>
    	<td>a</td>
        <td>b</td>
    </tr>
</table>

<p>4.单元格宽度绝对值</p>

<table border="1" width="200px">
    <tr>
    	<td width="50px">1</td>
        <td>2</td>
    </tr>
    
    <tr>
    	<td>3</td>
        <td>4</td>
    </tr>
    
    <tr>
    	<td>a</td>
        <td>b</td>
    </tr>
</table>

<p>5.单元格宽度相对值</p>

<table border="1" width="200px">
    <tr>
    	<td width="80%">1</td>
        <td>2</td>
    </tr>
    
    <tr>
    	<td>3</td>
        <td>4</td>
    </tr>
    
    <tr>
    	<td>a</td>
        <td>b</td>
    </tr>
</table>

<p>6.单元格水平对齐</p>

<table border="1" width="200px">
    <tr>
    	<td width="50%" align="left">1</td>
        <td>2</td>
    </tr>
    
    <tr>
    	<td align="center">3</td>
        <td>4</td>
    </tr>
    
    <tr>
    	<td align="right">a</td>
        <td>b</td>
    </tr>
</table>

<p>7.单元格垂直对齐</p>

<table border="1" width="200px">
    <tr>
    	<td width="50%" valign="top">1</td>
        <td>
            2<br/>
            2<br/>
            2<br/>
        </td>
    </tr>
    
    <tr>
    	<td vlign="middle">3</td>
        <td>
            4<br/>
            4<br/>
            4<br/>
        </td>
    </tr>
    
    <tr>
    	<td align="bottom">a</td>
        <td>
            b<br/>
            b<br/>
            b<br/>
        </td>
    </tr>
</table>

<p>8.横跨两列,水平合并</p>

<table border="1" width="200px">
    <tr>
        <td colspan="2">1,2</td>
    </tr>
    
    <tr>
        <td>3</td>
        <td>4</td>
    </tr>
    
    <tr>
        <td>a</td>
        <td>b</td>
    </tr>
</table>


<p>9.横跨两行,垂直合并</p>

<table border="1" width="200px">
    <tr>
        <td rowspan="2">1<br/>3</td>
        <td>2</td>
    </tr>
    
    <tr>
        <td>4</td>
    </tr>
    
    <tr>
        <td>a</td>
        <td>b</td>
    </tr>
</table>

<p>10.背景色</p>

<table border="1" width="200px">
    <tr bgcolor = "DeepSkyBlue">
        <td>1</td>
        <td>2</td>
    </tr>
    
    <tr>
        <td bgcolor="Pink">3</td>
        <td bgcolor="LightGreen">4</td>
    </tr>
    
    <tr bgcolor="Orange">
        <td>a</td>
        <td>b</td>
    </tr>
</table>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2019-10-17 给某列设置背景色

DepVit

关于前端部分-HTML-表格的提问

怎么给某一列设置背景色呢，我仿照你的给第一行设置背景色捣鼓了几下，发现不行

3 个答案

wangkunji
答案时间：2022-07-07

bgcolor 啊

java进阶之路
答案时间：2020-04-06

使用colgroup

代码超过 5行，点击查看

入门修仙
答案时间：2019-11-04

一个一个加吧哈哈

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

提问太多，页面渲染太慢，为了加快渲染速度，本页最多只显示几条提问。还有 11 条以前的提问，请点击查看

提问之前请登陆

提问已经提交成功，正在审核。请于我的提问处查看提问记录，谢谢

关于前端部分-HTML-表格的提问

尽量提供截图、代码和异常信息，有助于分析和解决问题。也可进本站QQ群交流: 578362961

提问尽量提供完整的代码，环境描述，越是有利于问题的重现，您的问题越能更快得到解答。
对教程中代码有疑问，请提供是哪个步骤，哪一行有疑问，这样便于快速定位问题，提高问题得到解答的速度
在已经存在的几千个提问里，有相当大的比例，是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本，可以节约自己大量的学习时间。站长把教学中用的软件版本整理了，都统一放在了这里，方便大家下载： https://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图