HTML之表格

Jensen 發布于2019-04-23 13:13 / 3208人閱讀

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

表格：

表格由

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

標簽定義）。字母 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表格

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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