整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
TML 表格實例:
| First Name | Last Name | Points |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| John | Doe | 80 |
| Adam | Johnson | 67 |
在線實例
表格
這個例子演示如何在 HTML 文檔中創建表格。
HTML 表格
表格由 <table> 標簽來定義。每個表格均有若干行（由 <tr> 標簽定義），每行被分割為若干單元格（由 <td> 標簽定義）。字母 td 指表格數據（table data），即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。
表格實例
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
在瀏覽器顯示如下：:
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 | row 2, cell 2 |
HTML 表格和邊框屬性
如果不定義邊框屬性，表格將不顯示邊框。有時這很有用，但是大多數時候，我們希望顯示邊框。
使用邊框屬性來顯示一個帶有邊框的表格：
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
HTML 表格表頭
表格的表頭使用 <th> 標簽進行定義。
大多數瀏覽器會把表頭顯示為粗體居中的文本：
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
在瀏覽器顯示如下：
| Header 1 | Header 2 |
|---|---|
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 | row 2, cell 2 |
更多實例
沒有邊框的表格
本例演示一個沒有邊框的表格。
表格中的表頭(Heading)
本例演示如何顯示表格表頭。
帶有標題的表格
本例演示一個帶標題 (caption) 的表格
跨行或跨列的表格單元格
本例演示如何定義跨行或跨列的表格單元格。
表格內的標簽
本例演示如何顯示在不同的元素內顯示元素。
單元格邊距(Cell padding)
本例演示如何使用 Cell padding 來創建單元格內容與其邊框之間的空白。
單元格間距(Cell spacing)
本例演示如何使用 Cell spacing 增加單元格之間的距離。
HTML 表格標簽
| 標簽 | 描述 |
|---|---|
| <table> | 定義表格 |
| <th> | 定義表格的表頭 |
| <tr> | 定義表格的行 |
| <td> | 定義表格單元 |
| <caption> | 定義表格標題 |
| <colgroup> | 定義表格列的組 |
| <col> | 定義用于表格列的屬性 |
| <thead> | 定義表格的頁眉 |
| <tbody> | 定義表格的主體 |
| <tfoot> | 定義表格的頁腳 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
天是劉小愛自學Java的第76天。
感謝你的觀看，謝謝你。
話不多說，繼續html的學習：
昨天學習了最基礎的文本標簽及屬性，除此之外還有很多其它標簽，今天逐一學習。
a標簽有一個必不可少的屬性：href。href也就是超鏈接的意思。
下面編寫代碼，其中我每行之間用了兩個換行符（<br/><br/>），為了使頁面看起來相對而言更加美觀些。
①href="#"
作用是跳轉本頁面。
②href="對應網頁鏈接地址"
作用是跳轉到對應網頁。
③href="本地主頁"
這個呢是我自己電腦里面的一個html文件，自己可以訪問，但是別人就沒法訪問了。
②中的是只要網址能打開，所有人都能訪問。
④href="mailto:對應郵箱地址"
作用是用本地的郵箱客戶端，給填寫的郵箱發送郵件。
⑤target="_self"
self，自身的意思，作用就是在當前頁面中打開填入的網頁鏈接。
⑥target="_blank"
blank，空白的意思，作用就是在新窗口中打開填入的網頁鏈接。
⑦title="劉小愛的博客"
title，又是標題，這里的作用是：當我們將鼠標放在當前鏈接上的時候會出現一個標題提示。
代碼編寫完畢，做一個測試：
其中有個小常識：
左鍵直接點擊，會在當前頁面中打開對應鏈接。
Ctrl+左鍵點擊，會在新的頁面中打開對應鏈接。
1圖片標簽
image，圖像的意思，簡寫為img，圖片標簽也就是用img來表示。
①src="圖片地址"
如果是本地圖片，寫出圖片所在的路徑即可。
如果是網絡圖片，寫出其對應的鏈接即可。
其中width為寬度，height為高度，如果只設置其中一項，高度和寬度是等比例縮放的。
當然也可以寬度高度同時設置不同的值。
②alt="圖片丟失了啦"
如果圖片丟失了，就會顯示alt里面的內容。
③title="我是劉小愛"
同a標簽一樣，當鼠標放在該圖片上時，會顯示title里的內容。
2列表標簽
list，即列表的意思，其中又分為有序列表和無序列表。
有序列表：ordered list，簡寫就是ol。
①type="1"
數字排序，這也是默認的有序排序規則，所以可以省略不寫。
②type="a"
使用小寫字母排序，詳情見上圖。
③type="A"
使用大寫字母排序，詳情見上圖。
④type="Ⅰ"
使用羅馬字母排序，詳情見上圖。
⑤type="i"
使用字母i來排序，詳情見上圖。
無序列表：unordered list，簡寫就是 ul。
①type="disc"
disc，唱片、圓盤的意思，這是無序列表的默認屬性，所以可以省略不寫。
②type="circle"
circle，圓形的意思。
③type="square"
square，正方形的意思。
1基本介紹
table，表格的意思，這在學數據庫時就接觸過。
tr，tablerow的縮寫，表示的是表格中的行。
td，tabledata的縮寫，表示的是表格中的數據。
①單元格：cell：細胞的意思，在表格中就表示為一個單元格。
②表格外邊框：border，邊界的意思，用其可以設置外邊框的粗細。
③單元格外間距：cellspacing，用其設定外間距。
④單元格內間距：cellpadding，用其設定內間距。
其中width表示表格的寬度，并且外間距一般都會設定為0，不然都不像是個表格的樣子。
①caption標簽
標題的意思，用以說明表格的標題，我這邊還用了一個b標簽將其給加粗了。
②th標簽
table head的簡寫，也就是表格的表頭，它是默認居中加粗的。
當然我們也可以根據align屬性來設定排序位置（居左，居中，居右）。
此外，其中也可以使用thead、tbody、tfoot標簽來劃分表格。
這個稍作了解即可，感覺使用這些標簽和不使用這些標簽對表格本身沒有影響。
2表格快速模板設置
看到左上角那個黃燈后點擊，選擇Language Injection Settings，最后選擇html即可。
這樣設置后就可以使用表格快速創建模板了。
先輸入table>tr*4>td*4，再加上Tab鍵，即可快速創建一個4*4的表格。
3合并單元格
①rowspan
合并行的意思，相同的列不同的行。
“2”的意思就是表示是跨兩行，從第1行開始將第1行和第2行合并起來了。
既然如此，那么第2行總共也就只需要3列了，所以將其第2行第1列刪除。
②colspan
合并列的意思，相同的行不同的列。
“3”的意思就是表示是跨3列，從第2列開始將第2列第3列和第4列合并起來了。
既然如此，那么第3行總共也就只需要2列了，所以將第3行中第3列第4列刪除。
謝謝你的觀看。
如果可以的話，麻煩幫忙點個贊，謝謝你。
篇介紹了網格容器、網格軌道的相關屬性使用方法，如果您還不熟悉網格，建議先去看看之前的文章前端入門——css Grid網格基礎知識 ，前端入門——css 網格軌道詳細介紹 學習下網格基本知識。
本篇主要介紹網格項的相關屬性：
以上四組屬性都和網格線密切相關，它們定義了網格項如何根據網格線來定位網格項的位置。
語法如下：
.item {
grid-column-start: <number> | <name> | span <number> | span <name> | auto;
grid-column-end: <number> | <name> | span <number> | span <name> | auto;
grid-row-start: <number> | <name> | span <number> | span <name> | auto;
grid-row-end: <number> | <name> | span <number> | span <name> | auto;
}屬性值說明：
如下示例：
.item-a {
grid-column-start: 2;
grid-column-end: five;
grid-row-start: row1-start;
grid-row-end: 3;
}.item-b {
grid-column-start: 1;
grid-column-end: span col4-start;
grid-row-start: 2;
grid-row-end: span 2;
}如果沒有聲明grid-column-end/ grid-row-end ，則默認情況下該項目將跨越 1 個網格。
項目可以相互重疊。您可以使用 z-index 它們來控制它們的堆疊順序。
上面介紹的grid-column-start / grid-row-start 、grid-column-end/ grid-row-end四個屬性還可以使用grid-row-start 和 grid-row-end 進行簡寫。
語法：
.item {
grid-column: <start-line> / <end-line> | <start-line> / span <value>;
grid-row: <start-line> / <end-line> | <start-line> / span <value>;
}屬性值：
如下示例：
.item-c {
grid-column: 3 / span 2;
grid-row: third-line / 4;
}如果沒有聲明結束值，則默認情況下該項目將跨越 1 個網格。
使用此屬性可以命名一個網格區域，以便在 grid-template-areas 屬性創建的模板中引用此網格區域，或者作為grid-row-start + grid-column-start + grid-row-end + grid-column-end 的更短的簡寫。
語法如下：
.item {
grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
}屬性值：
如下示例：
為網格區域分配名稱的一種方式
.item-d {
grid-area: header;
}作為簡寫
.item-d {
grid-area: 1 / col4-start / last-line / 6;
}https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-template-areas
https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
