html 表格套表格_HTML表格

html 表格套表格

A table is a set of rows and columns, which could be created on a webpage in HTML, by <table> tag. The tabular representation of complex data makes it readable.

表格是一組行和列,可以通過<table>標簽在HTML網頁上創建。 復雜數據的表格表示使其易于閱讀。

The <table> tag if followed by another tag <th> which specifies the table heading, the <tr> tag defines the table row and the <td> tag holds the table data.

如果<table>標記后跟另一個標記<th> ,該標記指定表標題,則<tr>標記定義表行,而<td>標記保存表數據。

The below code is a sample code to create a table in HTML.

以下代碼是在HTML中創建表的示例代碼。

<html>
<body>
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>Shivang</td>
<td>21</td>
<td>Indore</td>
</tr>		
<tr>
<td>Amit</td>
<td>22</td>
<td>Gwalior</td>
</tr>
</table>	
</body>
</html>

Output

輸出量

Table tag in HTML

Additionally, a table name could be assigned to the table by the <caption> element. The <caption> tag is to be inserted immediately after the <table> tag. Although the use of the caption element is completely optional for the table.

此外,可以通過<caption>元素將表名分配給表。 <caption>標記將立即插入<table>標記之后。 盡管對于表,標題元素的使用完全是可選的。

<html>
<body>
<table border>
<caption>Student Record</caption>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>Shivang</td>
<td>21</td>
<td>Indore</td>
</tr>		
<tr>
<td>Amit</td>
<td>22</td>
<td>Gwalior</td>
</tr>
</table>	
</body>
</html>

Output

輸出量

Table tag in HTML

The <table> tag has attributes which can alter the table representation. The border of the table, the alignment of the content of data in the table is some of them.

<table>標記具有可以更改表表示形式的屬性。 表的邊界,表中數據內容的對齊就是其中一些。

<table>標簽的共同屬性 (Common attributes of <table> tag)

align: The align attribute specifies the alignment of the table. The values which could be given to the align attribute are left, right or center.

align :align屬性指定表的對齊方式。 可以給align屬性指定的值是left,right或center。

<table align="right">

border: By default, the <table> tag applies no border to the table. Thus the border attribute is used to specify the width of the table border. This width could be given in either pixel or percentage.

border :默認情況下,<table>標記不對表應用邊框。 因此,border屬性用于指定表格邊框的寬度。 該寬度可以像素或百分比形式給出。

<table border="10px">

bordercolor: This attribute is used to provide a color to the border. The name or the hex code of the color is provided to this attribute to apply color to the border.

bordercolor :此屬性用于為邊框提供顏色。 顏色的名稱或十六進制代碼提供給此屬性,以將顏色應用于邊框。

<table bordercolor="#0000ff">

width: The width attribute specifies the table width. The value of this attribute is similar to the border as could be given in pixels or percentage form.

width :width屬性指定表格的寬度。 此屬性的值類似于邊框,可以以像素或百分比形式給出。

<table width="100%">

bgcolor: This attribute is used to apply color to the table. The name of the color or the hex-code is to be mentioned to this property. A hex-code of the color is the color code which is defined by the combination in the RGB system.

bgcolor :此屬性用于將顏色應用于表格。 顏色或十六進制代碼的名稱要在此屬性中提及。 顏色的十六進制代碼是由RGB系統中的組合定義的顏色代碼。

<table bgcolor="#000066">

An example with attributes

具有屬性的示例

<html>
<body>
<table border="2px" width="80%" bordercolor="#006969" bgcolor="yellow" align="center">
<caption>Student Record</caption>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>Shivang</td>
<td>21</td>
<td>Indore</td>
</tr>		
<tr>
<td>Amit</td>
<td>22</td>
<td>Gwalior</td>
</tr>
</table>	
</body>
</html>

Output

輸出量

Table tag in HTML

The CSS files also could be used for styling the table and adding more design and layouts to the table and providing the responsiveness to the table simultaneously.

CSS文件還可以用于對表格進行樣式設置,為表格添加更多設計和布局以及同時提供對表格的響應能力。

Some commonly used CSS properties of a table are,

表格的一些常用CSS屬性是,

  • border

    邊境

  • border-collapse

    邊界崩潰

  • padding

    填充

  • text-align

    文字對齊

Example of table with CSS

帶有CSS的表格示例

<html>
<body>
<style>
table {
border: solid 2px black; 
border-collapse: collapse;
padding: 10px;
text-align : center;
}
</style>
<table width="80%" bordercolor="#006969" bgcolor="yellow">
<caption>Student Record</caption>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>Shivang</td>
<td>21</td>
<td>Indore</td>
</tr>		
<tr>
<td>Amit</td>
<td>22</td>
<td>Gwalior</td>
</tr>
</table>	
</body>
</html>

Output

輸出量

Table tag in HTML

翻譯自: https://www.includehelp.com/html/html-tables.aspx

html 表格套表格

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/377011.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/377011.shtml
英文地址,請注明出處:http://en.pswp.cn/news/377011.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Android判斷界面

仿造微信&#xff0c;第一次進入去引導界面&#xff0c;否則進啟動界面。 package edu.hpu.init;import edu.hpu.logic.R;import android.app.Activity;import android.content.Intent;import android.content.SharedPreferences;import android.os.Bundle;import android.os.H…

HDU計算機網絡系統2021復習提綱

目錄計算機網絡系統的主要功能TCP/IP模型與OSI模型的層次結構及各層功能。&#xff08;掌握&#xff09;TCP/IP參考模型各層次所對應的主要設備局域網的體系結構與IEEE.802標準數據鏈路層的編址方式和主要設備原理數據鏈路層CSMA/CD的技術原理交換機VLAN原理與劃分方法數據鏈路…

ruby 線程id_Ruby中的線程

ruby 線程idRuby線程 (Ruby Threads) In Ruby, with the help of threads, you can implement more than one process at the same time or it can be said that Thread supports concurrent programming model. Apart from the main thread, you can create your thread with …

Dynamic web project --- AspectJ Project

本來想今天晚上 直接轉到 以前的web項目 做測試。。。可惜在eclipse 添加 aspectj的時候 提示我不是 aspectj項目。。于是我就百度了好久&#xff0c;發現好多人都和我一樣 &#xff0c; 不過我也發現了一些可以的 比如右鍵 AJDTtools --> convert to Aspectj Project ,可惜…

2013 南京邀請賽 A play the dice 求概率

1 /**2 大意&#xff1a;給定一個色子&#xff0c;有n個面&#xff0c;每一個面上有一個數字&#xff0c;在其中的m個面上有特殊的顏色&#xff0c;當擲出的色子出現這m個顏色之一時&#xff0c;可以再擲一次。。求其最后的期望3 思路&#xff1a;假設 期望為ans4 ans 1/…

擲骰子

Description: 描述&#xff1a; In this article, we are going to see a dynamic programing problem which can be featured in any interview rounds. 在本文中&#xff0c;我們將看到一個動態的編程問題&#xff0c;該問題可以在任何采訪回合中體現。 Problem statement:…

《YOLO算法筆記》(草稿)

檢測算法回顧 5、6年前的檢測算法大體如下&#xff1a; 手動涉及特征時應該考慮的因素&#xff1a; 1、尺度不變性 2、光照不變性 3、旋轉不變性 這一步驟稱為特征工程&#xff0c;最重要的一個算法稱為sift&#xff0c;(回顧SIFT講解)體現了上述所有的觀點。 在分類的過程中…

U盤安裝Centos6.3

一 首先下載Centos6.3的光盤鏡像文件&#xff0c;網上到鏡像實在是太多了。 CentOS-6.3-i386-bin-DVD1.iso CentOS-6.3-i386-bin-DVD2.iso 二 下載個新版本的UltraISO, 在其菜單“啟動”下有“寫入硬盤鏡像“功能到&#xff0c;原來用到綠色版本是8.6.2.2011不支持&#xff0c;…

[轉]粵語固有辭彙與漢語北方話辭彙對照

本文轉自&#xff1a;http://beta.wikiversity.org/wiki/%E7%B2%B5%E8%AA%9E%E5%9B%BA%E6%9C%89%E8%BE%AD%E5%BD%99%E8%88%87%E6%BC%A2%E8%AA%9E%E5%8C%97%E6%96%B9%E8%A9%B1%E8%BE%AD%E5%BD%99%E5%B0%8D%E7%85%A7 粵語固有辭彙與漢語北方話辭彙對照 「粵語」&#xff08;或稱「…

openlayer調用geoserver發布的地圖實現地圖的基本功能

轉自&#xff1a;http://starting.iteye.com/blog/1039809 主要實現的功能有放大&#xff0c;縮小&#xff0c;獲取地圖大小&#xff0c;平移&#xff0c;線路測量&#xff0c;面積測量&#xff0c;拉寬功能&#xff0c;顯示標注&#xff0c;移除標注&#xff0c;畫多邊形獲取經…

LLVM與Codegen技術

LLVM 百度百科 LLVM是構架編譯器(compiler)的框架系統&#xff0c;以C編寫而成&#xff0c;用于優化以任意程序語言編寫的程序的編譯時間(compile-time)、鏈接時間(link-time)、運行時間(run-time)以及空閑時間(idle-time)&#xff0c;對開發者保持開放&#xff0c;并兼容已有…

跟烏克蘭人學編程1

今天要Disable一個菜單&#xff0c;工程項目多&#xff0c;不容易找。 烏克蘭人建議我用Spy&#xff0c;將靶拖到目標窗體上就可以看到類名。轉載于:https://www.cnblogs.com/SunWentao/archive/2012/12/19/2825220.html

html網頁轉圖片_HTML圖片

html網頁轉圖片HTML圖片 (HTML Images) Images are visuals of something that look elegant. In web pages, images are used to create a good and appealing design. 圖像是外觀精美的視覺效果。 在網頁中&#xff0c;圖像用于創建良好且吸引人的設計。 The <img> ta…

Android學習拾遺

1. java中的flush()作用&#xff1a;強制將輸出流緩沖區的數據送出。 2. 文件存儲&#xff1a; 存儲到內部&#xff1a;另外使用一個class實現&#xff0c;最開始初始化用了this,后來放在這里不合適&#xff0c;改成了帶參數的構造方法。 包括存儲、讀取、追加 讀取&#xff1a…

OLAP 技術之列式存儲與數據壓縮(快查詢方法之一)

前言 列式存儲和數據壓縮&#xff0c;對于一款高性能數據庫來說是必不可少的特性。一個非常流行的觀點認為&#xff0c;如果你想讓查詢變得更快&#xff0c;最簡單且有效的方法是減少數據掃描范圍和數據傳輸時的大小&#xff0c;而列式存儲和數據壓縮就可以幫助我們實現上述兩…

sql 視圖嵌套視圖_SQL視圖

sql 視圖嵌套視圖SQL | 觀看次數 (SQL | Views) Views in SQL are virtual tables. A view also has rows and columns as theyre during a real table within the database. We will create a view by selecting fields from one or more tables present within the database.…

Postgresql多線程hashjoin(inner join)

pg hashjoin 節點大致步驟&#xff1a; 1、分塊與分桶。對一個表hash時&#xff0c;確定塊數和桶數量。&#xff08;一塊被劃分為10個元組的桶&#xff09;確定分塊號與分桶號是由hashvalue決定的。 2、執行&#xff1a; 1、順序獲取S表中所有元組&#xff0c;對每一條元組Has…

iframe實現局部刷新和回調--開篇

今天做項目遇到一個問題。就是提交表單的時候&#xff0c;驗證用戶名是否存在和驗證碼是否正確。 當驗證碼或者用戶名存在的時候。在后臺彈窗提示。可頁面原本file里面符合要求的值刷新沒了。用戶體驗不好。因為用ifream刷新技術已不是什么新鮮技術。所以網上有大把的資料可參考…

Java文件類boolean setExecutable(boolean exec_file,boolean owner_access)方法,帶示例

文件類boolean setExecutable(boolean exec_file&#xff0c;boolean owner_access) (File Class boolean setExecutable(boolean exec_file , boolean owner_access)) This method is available in package java.io.File.setExecutable(boolean exec_file , boolean owner_acc…

OLTP 系統和 OLAP 系統的核心設計思想

關于 OLTP 系統和 OLAP 系統的核心設計思想 數據存儲系統的關于查詢的典型操作&#xff1a; -- 第一種需求&#xff1a; 根據 key&#xff08;1&#xff09; 找 value&#xff08;name,age&#xff09;&#xff0c; 單點查詢 select name, age from student where id 1; stu…