how2j.cn


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

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

示例 1 :

3行2列表格

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 :

带边框的表格

设置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宽度

设置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 :

单元格宽度绝对值

设置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 :

单元格宽度相对值

设置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 :

单元格水平对齐

设置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 :

单元格垂直对齐

设置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 :

横跨两列, 水平合并

设置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 :

横跨两行, 垂直合并

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

背景色

设置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公众号,关注后实时获知布最新的教程和优惠活动,谢谢。


问答区域    
2018-03-09 单元格可以合并吗
SheyLou
比如第一行的单元格不变,第二行第一列第二列单元格可以合并吗








答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到




2017-07-27 1单元格设置了宽度,下面的没法自己改了么,就只能跟着第一个么
黑键
1单元格设置了宽度,下面的没法自己改了么,就只能跟着第一个么




1 个答案

how2j 答案时间:2017-07-28
table必然是对齐的




答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到




2017-07-13 单元格内容添加图片不显示。把图片放到同一级目录下显示,以file://的形式不显示
2017-07-12 <th> <caption>
2017-05-25 怎么给单元格内容设置颜色呢
2016-05-23 水平




提问之前请登陆
关于 前端部分-HTML-表格 的提问

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

上传截图