HTML之表格

Jensen 發(fā)布于2019-04-23 13:13 / 3268人閱讀

摘要：每個表格均有若干行由標簽定義，每行被分割為若干單元格由標簽定義。字母指表格數(shù)據(jù)，即數(shù)據(jù)單元格的內(nèi)容。數(shù)據(jù)單元格可以包含文本圖片列表段落表單水平線表格等等。

表格：

表格由

標簽來定義。每個表格均有若干行（由標簽定義），每行被分割為若干單元格（由

標簽定義）。字母 td 指表格數(shù)據(jù)（table data），即數(shù)據(jù)單元格的內(nèi)容。數(shù)據(jù)單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。border是邊框?qū)傩浴?/p>

<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>

運行結果：

表格標簽：

標簽

描述


定義表格
		定義表格的表頭，大多數(shù)瀏覽器會把表頭顯示為粗體居中的文本

定義表格的行
		定義表格單元

定義表格標題

定義表格列的組

定義用于表格列的屬性

定義表格的頁眉

定義表格的主體

定義表格的頁腳

表格形式：

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 垂直合并向下合并值包含自己
? ? ? 合并單元格本質(zhì)就是改變寬度高度占位實現(xiàn)的

）

<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.表格內(nèi)的標簽

<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" 邊距（內(nèi)容和單元格的距離）

<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

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/1596.html

前端開發(fā)知識點之 html &css

摘要：聲明允許表現(xiàn)性元素，廢氣元素以及。眾所周知強制屬性就是為禁用圖片時的兼容性作考慮。而正確的遵循標簽的語義，則是保證禁用時的兼容性。這種合并外邊距的方式被稱為折疊，并且因而所結合成的外邊距稱為折疊外邊距。 HTML&CSS 大綱對Web標準的理解、瀏覽器內(nèi)核差異、兼容性、hack、CSS基本功：布局、盒子模型、選擇器優(yōu)先級、 HTML5、CSS3、Flexbox doctype 聲...

felix0913 2019-08-30 13:47 評論0 收藏0
前端開發(fā)知識點之 html &css

摘要：聲明允許表現(xiàn)性元素，廢氣元素以及。眾所周知強制屬性就是為禁用圖片時的兼容性作考慮。而正確的遵循標簽的語義，則是保證禁用時的兼容性。這種合并外邊距的方式被稱為折疊，并且因而所結合成的外邊距稱為折疊外邊距。 HTML&CSS 大綱對Web標準的理解、瀏覽器內(nèi)核差異、兼容性、hack、CSS基本功：布局、盒子模型、選擇器優(yōu)先級、 HTML5、CSS3、Flexbox doctype 聲...

Scliang 2019-08-01 17:48 評論0 收藏0
CSS之表格邊框合并、兄弟標簽外邊距合并、父子標簽的外邊距合并

摘要：本文內(nèi)容表格邊框合并兄弟標簽外邊距合并父子標簽的外邊距合并首發(fā)日期表格邊框合并發(fā)生情況當設置了后，表格的相鄰邊框會合并，使得邊框變粗了。本文內(nèi)容：表格邊框合并兄弟標簽外邊距合并父子標簽的外邊距合并 ? 首發(fā)日期：2018-05-01 ? 表格邊框合并： ? 發(fā)生情況：當設置了cellpadding=0 cellspacing=0后，表格的相鄰邊框會合并，使得邊框變粗了。 D...

_Dreams 2019-04-23 13:46 評論0 收藏0
HTML之body標簽中的相關標簽補充

摘要：一列表標簽列表標簽分為三種。二表格標簽表格標簽用表示。單元格和單元格之間的距離外邊距，像素為單位。例如表示當前單元格在水平方向上要占據(jù)兩個單元格的位置。輸入標簽文本框輸入標簽文本框用于接收用戶輸入。一列表標簽　　列表標簽分為三種。　　1、無序列表，無序列表中的每一項是　　　　英文單詞解釋如下：　　　　　　a.ul：unordered list，無序列表的意思。　　　　　　b.l...

felix0913 2019-04-23 11:49 評論0 收藏0
HTML+CSS復習之HTML基礎篇

摘要：規(guī)定元素的上下文菜單。上下文菜單在用戶點擊元素時顯示。規(guī)定元素仍未或不再相關。規(guī)定是否對元素進行拼寫和語法檢查。規(guī)定元素的行內(nèi)樣式。一些說明寫在前面：HTML和CSS，當你了解所有規(guī)則后，你應該多寫頁面并記錄你出現(xiàn)的問題，這才是學習HTML和CSS的最佳方法這是我學習一段時間之后，再次回顧HTML，希望大家也對HTML有不一樣的認識我把HTML標簽分成兩大類，重要的和不重要的，...

genefy 2019-08-29 12:35 評論0 收藏0

發(fā)表評論

登陸后可評論

0條評論

Jensen

男|高級講師

我要關注我要私信

TA的文章

食品和農(nóng)業(yè)組織難逃網(wǎng)絡攻擊!美國農(nóng)場因勒索軟件攻擊損失900萬美元

閱讀 2549·2021-09-08 09:45
Electron 14.0.0 發(fā)布、StackBlitz 支持快速創(chuàng)建 Nuxt.js 應用 |

閱讀 3448·2021-09-08 09:45
(S)CSS中實現(xiàn)主題樣式的4?種方式

閱讀 3152·2019-08-30 15:54
javascript系列--javascript深入淺出圖解作用域鏈和閉包

閱讀 3407·2019-08-26 13:54
snabbdom源碼解析（二） h函數(shù)

閱讀 1477·2019-08-26 13:26
函數(shù)式編程學習

閱讀 1436·2019-08-26 13:23
2018年9月所遇知識點整理

閱讀 973·2019-08-23 17:57
javascript真●私有變量

閱讀 2233·2019-08-23 17:14

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

HTML之表格

沒有單元格邊距:

有單元格邊距:

沒有單元格間距:

單元格間距="0":

單元格間距="10":

相關文章

**前端開發(fā)知識點之 html &css**

**前端開發(fā)知識點之 html &css**

CSS之表格邊框合并、兄弟標簽外邊距合并、父子標簽的外邊距合并

HTML之body標簽中的相關標簽補充

HTML+CSS復習之HTML基礎篇

發(fā)表評論

0條評論

Jensen

男|高級講師

TA的文章

食品和農(nóng)業(yè)組織難逃網(wǎng)絡攻擊!美國農(nóng)場因勒索軟件攻擊損失900萬美元

Electron 14.0.0 發(fā)布、StackBlitz 支持快速創(chuàng)建 Nuxt.js 應用 |

(S)CSS中實現(xiàn)主題樣式的4?種方式

javascript系列--javascript深入淺出圖解作用域鏈和閉包

snabbdom源碼解析（二） h函數(shù)

函數(shù)式編程學習

2018年9月所遇知識點整理

javascript真●私有變量

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

HTML之表格

沒有單元格邊距:

有單元格邊距:

沒有單元格間距:

單元格間距="0":

單元格間距="10":

相關文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！