zoukankan      html  css  js  c++  java
  • 表格代码

    一、表格代码之行列基础

    1.一行一列表格

    一行一列

    代码如下:

    <TABLE borderColor=#0033ff cellSpacing=2 width="92%" align=center bgColor=#ff00ff border=2>

    <TBODY>

    <TR bgColor=#ddff99 height=50>

    <TD><FONT size=4>一行一列</FONT></TD>

    </TR></TBODY></TABLE>

    2.一行四列表格

    一行四列

    一行四列

    一行四列

    一行四列

    代码如下:

    <TABLE borderColor=#0033ff cellSpacing=2 width="92%" align=center bgColor=#ff00ff border=2>

    <TBODY>

    <TR bgColor=#ddff99 height=50>

    <TD width=20%><FONT size=4>一行四列</FONT></TD>

    <TD width=20%><FONT size=4>一行四列</FONT></TD>

    <TD width=20%><FONT size=4>一行四列</FONT></TD>

    <TD width=40%><FONT size=4>一行四列</FONT></TD>

    </TR></TBODY></TABLE>

    3.三行三列表格(可对表格中的文字进行水平对齐和垂直对齐设置)

    水平居左 垂直居上

    水平居中 垂直居上

    水平居右 垂直居上

    水平居左 垂直居中

    水平居中 垂直居中

    水平居右 垂直居中

    水平居左 垂直居下

    水平居中 垂直居下

    水平居右 垂直居下

    代码如下:

    <TABLE borderColor=#0033ff cellSpacing=2 width="92%" align=center bgColor=#ff0000 border=2>

    <TBODY>

    <TR bgColor=#ddff99 height=100>

    <TD vAlign=up width="33%"><FONT size=4>水平居左 垂直居上</FONT></TD>

    <TD vAlign=up align=middle width="34%"><FONT size=4>水平居中 垂直居上</FONT></TD>

    <TD vAlign=up align=right width="33%"><FONT size=4>水平居右 垂直居上</FONT></TD></TR>

    <TR bgColor=#ddff99 height=100>

    <TD width="33%"><FONT size=4>水平居左 垂直居中</FONT></TD>

    <TD align=middle width="34%"><FONT size=4>水平居中 垂直居中</FONT></TD>

    <TD align=right width="33%"><FONT size=4>水平居右 垂直居中</FONT></TD></TR>

    <TR bgColor=#ddff99 height=100>

    <TD vAlign=bottom width="33%"><FONT size=4>水平居左 垂直居下</FONT></TD>

    <TD vAlign=bottom align=middle width="34%"><FONT size=4>水平居中 垂直居下</FONT></TD>

    <TD vAlign=bottom align=right width="33%"><FONT size=4>水平居右 垂直居下</FONT></TD></TR>

    </TBODY></TABLE>

    二、表格代码之合并单元格

    1.合并表格第一行单元格

    合并第一行单元格

    单元格4

    单元格5

    单元格6

    单元格7

    单元格8

    单元格9

    代码如下:

    <TABLE borderColor=#0000ff cellSpacing=2 width="92%" align=center bgColor=#ffffff border=2>

    <TBODY>

    <TR height=40>

    <TD bgColor=#bbbbbb colSpan=3><FONT size=4>合并第一行单元格</FONT></TD></TR>

    <TR height=40>

    <TD><FONT size=4>单元格4</FONT></TD>

    <TD><FONT size=4>单元格5</FONT></TD>

    <TD><FONT size=4>单元格6</FONT></TD></TR>

    <TR height=40>

    <TD><FONT size=4>单元格7</FONT></TD>

    <TD><FONT size=4>单元格8</FONT></TD>

    <TD><FONT size=4>单元格9</FONT></TD></TR></TBODY></TABLE>

    2.合并表格第1、2两个单元格

    合并第1、2单元格

    单元格3

    单元格4

    单元格5

    单元格6

    单元格7

    单元格8

    单元格9

    代码如下:

    <TABLE borderColor=#0000ff cellSpacing=2 width="92%" align=center bgColor=#ffffff border=2>

    <TBODY>

    <TR height=40>

    <TD bgColor=#bbbbbb colSpan=2><FONT size=4>合并第1、2单元格</FONT></TD>

    <TD><FONT size=4>单元格3</FONT></TD></TR>

    <TR height=40>

    <TD><FONT size=4>单元格4</FONT></TD>

    <TD><FONT size=4>单元格5</FONT></TD>

    <TD><FONT size=4>单元格6</FONT></TD></TR>

    <TR height=40>

    <TD><FONT size=4>单元格7</FONT></TD>

    <TD><FONT size=4>单元格8</FONT></TD>

    <TD><FONT size=4>单元格9</FONT></TD></TR></TBODY></TABLE>

    3.合并表格第4、7单元格

    单元格1

    单元格2

    单元格3

    合并第4、7单元格

    单元格5

    单元格6

    单元格8

    单元格9

    代码如下:

    <TABLE borderColor=#0000ff cellSpacing=2 width="92%" align=center bgColor=#ffffff border=2>

    <TBODY>

    <TR height=40>

    <TD><FONT size=4>单元格1</FONT></TD>

    <TD><FONT size=4>单元格2</FONT></TD>

    <TD><FONT size=4>单元格3</FONT></TD></TR>

    <TR height=40>

    <TD width="33%" bgColor=#bbbbbb rowSpan=2><FONT size=4>合并第4、7单元格</FONT></TD>

    <TD><FONT size=4>单元格5</FONT></TD>

    <TD><FONT size=4>单元格6</FONT></TD></TR>

    <TR height=40>

    <TD><FONT size=4>单元格8</FONT></TD>

    <TD><FONT size=4>单元格9</FONT></TD></TR></TBODY></TABLE>

  • 相关阅读:
    Vue学习之webpack中使用vue(十七)
    Vue学习之Babel配置(十六)
    Vue学习之webpack调用第三方loader(十五)
    JAVA基础之设置随机成语验证码
    JAVA基础之HttpServletResponse响应
    Vue学习之npm常用命令及参数小结(十四)
    EXCEL 查找某个字符在字符串中最后一次出现的位置
    SQLSERVER存储过程基本语法
    SQL SERVER 字符串函数 STRING_SPLIT()
    SQL SERVER 字符串函数 PATINDEX()
  • 原文地址:https://www.cnblogs.com/dachie/p/1734389.html
Copyright © 2011-2022 走看看