HTML之表格

Jensen 发布于2019-04-23 13:13 / 3188人阅读

摘要：每个表格均有若干行由标签定义，每行被分割为若干单元格由标签定义。字母指表格数据，即数据单元格的内容。数据单元格可以包含文本图片列表段落表单水平线表格等等。

表格：

表格由

标签来定义。每个表格均有若干行（由标签定义），每行被分割为若干单元格（由

标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。border是边框属性。

<table border="1">
    <tr>
        <td>row 1, cell 1td>
        <td>row 1, cell 2td>
    tr>
    <tr>
        <td>row 2, cell 1td>
        <td>row 2, cell 2td>
    tr>
table>

运行结果：

表格标签：

标签

描述


定义表格
		定义表格的表头，大多数浏览器会把表头显示为粗体居中的文本

定义表格的行
		定义表格单元

定义表格标题

定义表格列的组

定义用于表格列的属性

定义表格的页眉

定义表格的主体

定义表格的页脚

表格形式：

1.无边框表格

第一种：
<table>
   <tr>
       <td>100td>
       <td>200td>
       <td>300td>
   tr>
   <tr>
       <td>400td>
       <td>500td>
       <td>600td>
   tr>
table>

第二种：
<table border="0">
   <tr>
       <td>100td>
       <td>200td>
       <td>300td>
   tr>
   <tr>
       <td>400td>
       <td>500td>
       <td>600td>
   tr>
table>

2.表头

水平标题：
<table border="1">
    <tr>
       <th>表头一th>
       <th>表头二th>
       <th>表头三th>
    tr>
    <tr>
       <td>100td>
       <td>200td>
       <td>300td>
    tr>
table>

垂直标题：
<table border="1">
    <tr>
       <th>表头一th>
       <td>100td>
    tr>
    <tr>
       <th>表头二th>
       <td>200td>
    tr>
    <tr>
       <th>表头三th>
       <td>300td>
    tr>
table>

运行结果：

表头一	表头二	表头三
100	200	300

表头一	100
表头二	200
表头三	300

3.标题

<table border="1">
<caption>标题caption>
    <tr>
       <th>表头一th>
       <td>100td>
    tr>
    <tr>
       <th>表头二th>
       <td>200td>
    tr>
    <tr>
      <th>表头三th>
       <td>300td>
    tr>
table>

运行结果：

标题
表头一	100
表头二	200
表头三	300

4.跨行跨列的表格单元格（

合并单元格：
单元格属性：
colspan=2 水平合并向右合并值包含自己
rowspan=2 垂直合并向下合并值包含自己
合并单元格本质就是改变宽度高度占位实现的

）

<table border="1">
    <tr>
       <th>表头一th>
       <th colspan="2">表头二th>
      
    tr>
    <tr>
       <td>100td>
       <td>200td>
       <td>300td>
    tr>
table>
<table border="1">
    <tr>
       <th>表头一th>
       <td>100td>
    tr>
    <tr>
       <th rowspan="2">表头二th>
       <td>200td>
    tr>
    <tr>  
       <td>300td>
    tr>
table>

运行结果：

表头一	表头二
100	200	300

表头一	100
表头二	200
表头二	300

5.表格内的标签

<table border="1">
<tr>
  <td>
   <p>这是一个段落p>
   <p>这是另一个段落p>
  td>
  <td>这个单元格包含一个表格:
   <table border="1">
   <tr>
     <td>Atd>
     <td>Btd>
   tr>
   <tr>
     <td>Ctd>
     <td>Dtd>
   tr>
   table>
  td>
tr>
<tr>
  <td>这个单元格包含一个列表
   <ul>
    <li>applesli>
    <li>bananasli>
    <li>pineapplesli>
   ul>
  td>
  <td>HELLOtd>
tr>
table>

运行结果：

这是一个段落

这是另一个段落

这个单元格包含一个表格:

A	B
C	D

这个单元格包含一个列表

apples
bananas
pineapples

HELLO

6.单元格边距， cellpadding="0" 边距（内容和单元格的距离）

<h4>没有单元格边距:h4>
<table border="1">
<tr>
  <td>Firsttd>
  <td>Rowtd>
tr>   
<tr>
  <td>Secondtd>
  <td>Rowtd>
tr>
table>

<h4>有单元格边距:h4>
<table border="1" 
cellpadding="10">
<tr>
  <td>Firsttd>
  <td>Rowtd>
tr>   
<tr>
  <td>Secondtd>
  <td>Rowtd>
tr>
table>

运行结果：

没有单元格边距:

First	Row
Second	Row

有单元格边距:

First	Row
Second	Row

7.单元格间距， cellspacing="0" 间距（单元格与单元格的距离

<h4>没有单元格间距:h4>
<table border="1">
<tr>
  <td>Firsttd>
  <td>Rowtd>
tr>
<tr>
  <td>Secondtd>
  <td>Rowtd>
tr>
table>

<h4>单元格间距="0":h4>
<table border="1" cellspacing="0">
<tr>
  <td>Firsttd>
  <td>Rowtd>
tr>
<tr>
  <td>Secondtd>
  <td>Rowtd>
tr>
table>

<h4>单元格间距="10":h4>
<table border="1" cellspacing="10">
<tr>
  <td>Firsttd>
  <td>Rowtd>
tr>
<tr>
  <td>Secondtd>
  <td>Rowtd>
tr>
table>

运行结果：

没有单元格间距:

First	Row
Second	Row

单元格间距="0":

First	Row
Second	Row

单元格间距="10":

First	Row
Second	Row

GPU云服务器云服务器 html 凹形之体 html5新特性之webrtc html表格中加表格 html表格

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1596.html

前端开发知识点之 html &css

摘要：声明允许表现性元素，废气元素以及。众所周知强制属性就是为禁用图片时的兼容性作考虑。而正确的遵循标签的语义，则是保证禁用时的兼容性。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。 HTML&CSS 大纲对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功：布局、盒子模型、选择器优先级、 HTML5、CSS3、Flexbox doctype 声...

felix0913 2019-08-30 13:47 评论0 收藏0
前端开发知识点之 html &css

摘要：声明允许表现性元素，废气元素以及。众所周知强制属性就是为禁用图片时的兼容性作考虑。而正确的遵循标签的语义，则是保证禁用时的兼容性。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。 HTML&CSS 大纲对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功：布局、盒子模型、选择器优先级、 HTML5、CSS3、Flexbox doctype 声...

Scliang 2019-08-01 17:48 评论0 收藏0
CSS之表格边框合并、兄弟标签外边距合并、父子标签的外边距合并

摘要：本文内容表格边框合并兄弟标签外边距合并父子标签的外边距合并首发日期表格边框合并发生情况当设置了后，表格的相邻边框会合并，使得边框变粗了。本文内容：表格边框合并兄弟标签外边距合并父子标签的外边距合并首发日期：2018-05-01 表格边框合并：发生情况：当设置了cellpadding=0 cellspacing=0后，表格的相邻边框会合并，使得边框变粗了。 D...

_Dreams 2019-04-23 13:46 评论0 收藏0
HTML之body标签中的相关标签补充

摘要：一列表标签列表标签分为三种。二表格标签表格标签用表示。单元格和单元格之间的距离外边距，像素为单位。例如表示当前单元格在水平方向上要占据两个单元格的位置。输入标签文本框输入标签文本框用于接收用户输入。一列表标签　　列表标签分为三种。　　1、无序列表，无序列表中的每一项是　　　　英文单词解释如下：　　　　　　a.ul：unordered list，无序列表的意思。　　　　　　b.l...

felix0913 2019-04-23 11:49 评论0 收藏0
HTML+CSS复习之HTML基础篇

摘要：规定元素的上下文菜单。上下文菜单在用户点击元素时显示。规定元素仍未或不再相关。规定是否对元素进行拼写和语法检查。规定元素的行内样式。一些说明写在前面：HTML和CSS，当你了解所有规则后，你应该多写页面并记录你出现的问题，这才是学习HTML和CSS的最佳方法这是我学习一段时间之后，再次回顾HTML，希望大家也对HTML有不一样的认识我把HTML标签分成两大类，重要的和不重要的，...

genefy 2019-08-29 12:35 评论0 收藏0