美文网首页Web前端之路
网页设计:HTML表格标签

网页设计:HTML表格标签

作者: 前小小 | 来源:发表于2020-12-07 22:17 被阅读0次

表格组成:

  • table 表格容器(外框)
  • <caption>:定义表格的标题;
  • <th></th>:定义一个表格头;
  • <tr></tr> :定义一个表格行;
  • <td></td> :定义一个单元格;

标签属性:

1)table(表)常用属性:

  • border:边框粗细
  • height:高度
  • width:宽度
  • bgcolor:背景颜色
  • background:背景图片
  • cellspacing:单元格到单元格之间的距离
  • cellpadding:单元格内容到单元格之间的距离
  • align:表格在网页摆放位置
    值:
    left:左对齐
    right:右对齐
    center:居中对齐
<table border=" 值" height=" 值" width=" 值" cellspacing=" 值" cellpadding=" 值" align="值" >
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

2)tr(一行)属性

  • align:这一行单元格内容水平摆放方式;

值:
left:左对齐
right:右对齐
center:居中对齐

  • valign:这一行单元格内容垂直摆放方式;

值:
left:左对齐
right:右对齐
center:居中对齐

<tr align="值" valign=" 值" >
      <!-- 高宽与table的属性一致 -->
</tr>

3)td(单元格)属性

  • align:这一行单元格内容水平摆放方式;

值:
left:左对齐
right:右对齐
center:居中对齐

  • valign:这一行单元格内容垂直摆放方式;

值:
left:左对齐
right:右对齐
center:居中对齐

<td align=" 值" valign=" 值">

</td>

单元格合并:

属性:

  • colspan 指明这一个单元格横向占据几个单元格宽度 默认为1
  • rowspan 指明这一个单元格纵向占据几个单元格高度 默认为1

例:

<table border="1" height="300" width="300" cellpadding="0" cellspacing="0">
    <tr>
        <td colspan="2">1</td>  
        <td>3</td>
    </tr>
    <tr>
        <td rowspan="2">4</td>
        <td>5</td>
    </tr>
    <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
</table>
</body>

相关文章

  • 网页设计:HTML表格标签

    表格组成: table 表格容器(外框) :定义表格的标题; :定义一个表格头; :定义一个表格行; :定义一个单...

  • CSS 表格属性

    表格属性 CSS表格属性用于设置HTML表格的样式,HTML表格由 标签嵌套 , , 等标签组成,一个HTML...

  • 零基础Web前端开发(5)

    HTML表格概述 表格的基本结构 表格的基本标签有标签 (表格), 标签(表格行), 标签(表格单元格)。 标签和...

  • 点时创新Web前端课程大纲

    一、html常用标签、列表、表格、表单... 二、css 样式字体设置、盒模型、网页布局... 三、JavaScr...

  • 表格

    创建表格 在HTML网页中,要想创建表格,就需要使用表格相关的标签。创建表格的基本语法格式如下: 单元格内的...

  • CSS样式

    CSS概念 最开始的网页用HTML标签和属性来设计网页的内容和标签,现代网页为了便于修改网页样式,将网页的内容和样...

  • 网页设计:HTML表单标签

    表单包含三个基本组成部分:表单标签、表单域、表单按钮。 1,表单标签 HTML 表单用于收集用户输入,表单使用 ...

  • 网页设计:HTML列表标签

    无序列表 有序列表 自定义列表 1,无序列表 无序列表的标签是: 无序列表 定义一个无序列表: 定义一个列表项; ...

  • 网页设计:HTML标签分类

    HTML中的标签从闭合的角度可以分为闭合标签和空标签。而HTML中大部分标签都是闭合标签,其他少数为空标签; 常见...

  • 网页设计:HTML注释标签

    HTML 注释 使用 "< "和 ">" 是符合HTML标签语法规则的。 所有浏览器都支持注释标签。 注释标签用...

网友评论

    本文标题:网页设计:HTML表格标签

    本文链接:https://www.haomeiwen.com/subject/yhhxgktx.html