how2j.cn


工具版本兼容问题
<table>标签用于显示一个表格
<tr> 表示行
<td> 表示列又叫单元格


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

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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
设置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>
<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 全屏编辑,再次点击恢复
渲染中 渲染完成
效果


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


问答区域    
2020-07-09 实现
世界好大




实现
<table border="1" width="200px">
 <tr>
   <td>222</td>
   <td>333</td>
 </tr>

 <tr>
   <td>123</td>
   <td>456</td>
 </tr>
</table>

							





回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2019-12-23 小企业的前端Time-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 给某列设置背景色
2019-09-29 有点不明白
2019-09-01 表格不加left时我看就默认左对齐,是不是如果实际应用中想左对齐的话,不用加align="left"也行?


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

提问之前请登陆
提问已经提交成功,正在审核。 请于 我的提问 处查看提问记录,谢谢
关于 前端部分-HTML-表格 的提问

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

上传截图