Web Front-end
HTML Tutorial
Proficient in CSS DIV web page style and layout setting forms and tables_html/css_WEB-ITnose
Proficient in CSS DIV web page style and layout setting forms and tables_html/css_WEB-ITnose
Tables and forms are two very important elements in web pages. In the last blog, we briefly introduced the page background setting of CSS. Today, the editor will continue to introduce the relevant knowledge of CSS. In our How to set up tables and forms in CSS, first of all, let’s take a look at a mind map to briefly preview the basic knowledge of CSS that this blog post mainly explains: The tags, codes and running results in the table are as follows:
In the input form, the text part first starts with a table tag, which represents the entire table, a caption represents the title of a table, tr represents the rows of a table, and th represents the more important first row of a table, followed by th represents the more important vertical row of the table, and the td table contains cells one by one. The operation effect is as shown in the figure above. These tags: tr, th, td are all indispensable elements that make up the table. The table just now is very elegant. We just want to mark the table. So how does CSS control the color of the table? Let’s look at our next example code and running effect:
’ ’s ’ ’ s ’ s ’ ‑ ’ ‑ ‑ ‑ ‑ ‑ being _ , use a class="datalist" here in the table to define the CSS of the entire table. The body sets the background color and alignment; the dataList sets the table text color, table background color and table font; the datalist caption sets the title. After seeing the above effect, for a large amount of data, the table has a lot of rows and a lot of columns. If each row of the table uses the same color, it will be inconvenient to find the data. And interlaced discoloration can solve this problem. Look at the following example code and operating effect:
<span style="font-size:18px;"><html><head><title>年度收入</title><style><!--table{ caption-side:bottom;}--></style> </head><body> <table summary="This table shows the yearly income for years 2004 through 2007" border="1"> <caption>年度收入 2004 - 2007</caption> <tr> <th></th> <th scope="col">2004</th> <th scope="col">2005</th> <th scope="col">2006</th> <th scope="col">2007</th> </tr> <tr> <th scope="row">拨款</th> <td>11,980</td> <td>12,650</td> <td>9,700</td> <td>10,600</td> </tr> <tr> <th scope="row">捐款</th> <td>4,780</td> <td>4,989</td> <td>6,700</td> <td>6,590</td> </tr> <tr> <th scope="row">投资</th> <td>8,000</td> <td>8,100</td> <td>8,760</td> <td>8,490</td> </tr> <tr> <th scope="row">募捐</th> <td>3,200</td> <td>3,120</td> <td>3,700</td> <td>4,210</td> </tr> <tr> <th scope="row">销售</th> <td>28,400</td> <td>27,100</td> <td>27,950</td> <td>29,050</td> </tr> <tr> <th scope="row">杂费</th> <td>2,100</td> <td>1,900</td> <td>1,300</td> <td>1,760</td> </tr> <tr> <th scope="row">总计</th> <td>58,460</td> <td>57,859</td> <td>58,110</td> <td>60,700</td> </tr></table></body></html></span>
Analysis Take a look at the above code. The text part contains both odd-numbered lines and even-numbered lines. Everyone can see the attribute values. What is worth mentioning is the altrow here. If this attribute is set, it will cover other colors, and It uses its own color, which achieves the effect of interlaced color change. So let's take a look at how CSS controls the form? The example code and running effect are as follows:
The running effect is as follows:
<span style="font-size:18px;"><html><head><title>年度收入</title><style><!--body{ background-color:#ebf5ff; /* 页面背景色 */ margin:0px; padding:4px; text-align:center; /* 居中对齐（IE有效） */}.datalist{ color:#0046a6; /* 表格文字颜色 */ background-color:#d2e8ff; /* 表格背景色 */ font-family:Arial; /* 表格字体 */}.datalist caption{ font-size:18px; /* 标题文字大小 */ font-weight:bold; /* 标题文字粗体 */}.datalist th{ color:#003e7e; /* 行、列名称颜色 */ background-color:#7bb3ff; /* 行、列名称的背景色 */}--></style> </head><body> <table summary="This table shows the yearly income for years 2004 through 2007" border="1" class="datalist"> <caption>年度收入 2004 - 2007</caption> <tr> <th></th> <th scope="col">2004</th> <th scope="col">2005</th> <th scope="col">2006</th> <th scope="col">2007</th> </tr> <tr> <th scope="row">拨款</th> <td>11,980</td> <td>12,650</td> <td>9,700</td> <td>10,600</td> </tr> <tr> <th scope="row">捐款</th> <td>4,780</td> <td>4,989</td> <td>6,700</td> <td>6,590</td> </tr> <tr> <th scope="row">投资</th> <td>8,000</td> <td>8,100</td> <td>8,760</td> <td>8,490</td> </tr> <tr> <th scope="row">募捐</th> <td>3,200</td> <td>3,120</td> <td>3,700</td> <td>4,210</td> </tr> <tr> <th scope="row">销售</th> <td>28,400</td> <td>27,100</td> <td>27,950</td> <td>29,050</td> </tr> <tr> <th scope="row">杂费</th> <td>2,100</td> <td>1,900</td> <td>1,300</td> <td>1,760</td> </tr> <tr> <th scope="row">总计</th> <td>58,460</td> <td>57,859</td> <td>58,110</td> <td>60,700</td> </tr></table></body></html></span>
Analyze the above example. The text part is a form. It starts with the form logo, which has an input box, a drop-down menu, a radio option, a check box, a text input box, and a button. The running effect is as shown in the picture above. Let's look at the text-like button next. , let’s take a look at the example code and running effect:
The running effect is as follows:
<span style="font-size:18px;"><html><head><title>Member List</title><style><!--.datalist{ border:1px solid #0058a3; /* 表格边框 */ font-family:Arial; border-collapse:collapse; /* 边框重叠 */ background-color:#eaf5ff; /* 表格背景色 */ font-size:14px;}.datalist caption{ padding-bottom:5px; font:bold 1.4em; text-align:left;}.datalist th{ border:1px solid #0058a3; /* 行名称边框 */ background-color:#4bacff; /* 行名称背景色 */ color:#FFFFFF; /* 行名称颜色 */ font-weight:bold; padding-top:4px; padding-bottom:4px; padding-left:12px; padding-right:12px; text-align:center;}.datalist td{ border:1px solid #0058a3; /* 单元格边框 */ text-align:left; padding-top:4px; padding-bottom:4px; padding-left:10px; padding-right:10px;}.datalist tr.altrow{ background-color:#c7e5ff; /* 隔行变色 */}--></style> </head><body> <table class="datalist" summary="list of members in EE Studay"> <caption>Member List</caption> <tr> <th scope="col">Name</th> <th scope="col">Class</th> <th scope="col">Birthday</th> <th scope="col">Constellation</th> <th scope="col">Mobile</th> </tr> <tr> <!-- 奇数行 --> <td>isaac</td> <td>W13</td> <td>Jun 24th</td> <td>Cancer</td> <td>1118159</td> </tr> <tr class="altrow"> <!-- 偶数行 --> <td>girlwing</td> <td>W210</td> <td>Sep 16th</td> <td>Virgo</td> <td>1307994</td> </tr> <tr> <!-- 奇数行 --> <td>tastestory</td> <td>W15</td> <td>Nov 29th</td> <td>Sagittarius</td> <td>1095245</td> </tr> <tr class="altrow"> <!-- 偶数行 --> <td>lovehate</td> <td>W47</td> <td>Sep 5th</td> <td>Virgo</td> <td>6098017</td> </tr> <tr> <!-- 奇数行 --> <td>slepox</td> <td>W19</td> <td>Nov 18th</td> <td>Scorpio</td> <td>0658635</td> </tr> <tr class="altrow"> <!-- 偶数行 --> <td>smartlau</td> <td>W19</td> <td>Dec 30th</td> <td>Capricorn</td> <td>0006621</td> </tr> <tr> <!-- 奇数行 --> <td>whaler</td> <td>W19</td> <td>Jan 18th</td> <td>Capricorn</td> <td>1851918</td> </tr> <tr class="altrow"> <!-- 偶数行 --> <td>shenhuanyan</td> <td>W25</td> <td>Jan 31th</td> <td>Aquarius</td> <td>0621827</td> </tr> <tr> <!-- 奇数行 --> <td>tuonene</td> <td>W210</td> <td>Nov 26th</td> <td>Sagittarius</td> <td>0091704</td> </tr> <tr class="altrow"> <!-- 偶数行 --> <td>ArthurRivers</td> <td>W91</td> <td>Feb 26th</td> <td>Pisces</td> <td>0468357</td> </tr> <tr> <!-- 奇数行 --> <td>reconzansp</td> <td>W09</td> <td>Oct 13th</td> <td>Libra</td> <td>3643041</td> </tr> <tr class="altrow"> <!-- 偶数行 --> <td>linear</td> <td>W86</td> <td>Aug 18th</td> <td>Leo</td> <td>6398341</td> </tr> <tr> <!-- 奇数行 --> <td>laopiao</td> <td>W41</td> <td>May 17th</td> <td>Taurus</td> <td>1254004</td> </tr> <tr class="altrow"> <!-- 偶数行 --> <td>dovecho</td> <td>W19</td> <td>Dec 9th</td> <td>Sagittarius</td> <td>1892013</td> </tr> <tr> <!-- 奇数行 --> <td>shanghen</td> <td>W42</td> <td>May 24th</td> <td>Gemini</td> <td>1544254</td> </tr> <tr class="altrow"> <!-- 偶数行 --> <td>venessawj</td> <td>W45</td> <td>Apr 1st</td> <td>Aries</td> <td>1523753</td> </tr> <tr> <!-- 奇数行 --> <td>lightyear</td> <td>W311</td> <td>Mar 23th</td> <td>Aries</td> <td>1002908</td> </tr></table></body></html></span>
Analyze the above example, In the above example, we set the border-bottom to 1px, and the other border-top, border-left, and border-right borders to 0. Then we set a color and background color to achieve a text-like button. . For this button, we set all four borders to 0, and set the background color to transparent to achieve a text-like button; through this we can see that clever use of CSS can bring us many surprises. Excel spreadsheet is a very popular software in office software, and we will simulate it on the web page. In our CSS, we can input things at will just like excel in the office, without any cumbersome input boxes. Let’s take a look at the example code and running results:
The running results are as follows:
<span style="font-size:18px;"><html><head><title>表单</title><style><!--form { border: 1px dotted #AAAAAA; padding: 3px 6px 3px 6px; margin:0px; font:14px Arial;}input { color: #00008B; background-color: #ADD8E6; border: 1px solid #00008B;}select { width: 80px; color: #00008B; background-color: #ADD8E6; border: 1px solid #00008B;}textarea { width: 200px; height: 40px; color: #00008B; background-color: #ADD8E6; border: 1px solid #00008B;}--></style> </head><body><form method="post"><p>请输入您的姓名:<br><input type="text" name="name" id="name"></p><p>请选择你最喜欢的颜色:<br><select name="color" id="color"> <option value="red">红</option> <option value="green">绿</option> <option value="blue">蓝</option> <option value="yellow">黄</option> <option value="cyan">青</option> <option value="purple">紫</option></select></p><p>请问你的性别:<br> <input type="radio" name="sex" id="male" value="male">男<br> <input type="radio" name="sex" id="female" value="female">女</p><p>你喜欢做些什么:<br> <input type="checkbox" name="hobby" id="book" value="book">看书 <input type="checkbox" name="hobby" id="net" value="net">上网 <input type="checkbox" name="hobby" id="sleep" value="sleep">睡觉</p><p>我要留言:<br><textarea name="comments" id="comments" cols="30" rows="4"></textarea></p><p><input type="submit" name="btnSubmit" id="btnSubmit" value="Submit"></p></form></body></html></span> form. The color in the table, the color change of alternate rows, the elements in the form, text buttons, a small test is to imitate the office to make an Excel table that can be edited. There is a small example, which is to imitate the Excel in the office to make an editable table. , first of all, the text part is built with a table, and the form is nested inside the table, and each item is set with an id and a name. Finally, there is a button; let’s look at the CSS code. In the table, we set the border of the td cell, and for the input text box, we set its border to none, so the effect achieved is the input border. was canceled and replaced by the border of the table, thus realizing such a little trick. Through this example, we can see that cleverly setting CSS can achieve many unexpected effects. BS study, to be continued...
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Is HTML easy to learn for beginners?
Apr 07, 2025 am 12:11 AM
HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.
The Roles of HTML, CSS, and JavaScript: Core Responsibilities
Apr 08, 2025 pm 07:05 PM
HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.
Understanding HTML, CSS, and JavaScript: A Beginner's Guide
Apr 12, 2025 am 12:02 AM
WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.
What is an example of a starting tag in HTML?
Apr 06, 2025 am 12:04 AM
AnexampleofastartingtaginHTMLis,whichbeginsaparagraph.StartingtagsareessentialinHTMLastheyinitiateelements,definetheirtypes,andarecrucialforstructuringwebpagesandconstructingtheDOM.
Gitee Pages static website deployment failed: How to troubleshoot and resolve single file 404 errors?
Apr 04, 2025 pm 11:54 PM
GiteePages static website deployment failed: 404 error troubleshooting and resolution when using Gitee...
How to implement adaptive layout of Y-axis position in web annotation?
Apr 04, 2025 pm 11:30 PM
The Y-axis position adaptive algorithm for web annotation function This article will explore how to implement annotation functions similar to Word documents, especially how to deal with the interval between annotations...
HTML, CSS, and JavaScript: Essential Tools for Web Developers
Apr 09, 2025 am 12:12 AM
HTML, CSS and JavaScript are the three pillars of web development. 1. HTML defines the web page structure and uses tags such as, etc. 2. CSS controls the web page style, using selectors and attributes such as color, font-size, etc. 3. JavaScript realizes dynamic effects and interaction, through event monitoring and DOM operations.
How to use CSS3 and JavaScript to achieve the effect of scattering and enlarging the surrounding pictures after clicking?
Apr 05, 2025 am 06:15 AM
To achieve the effect of scattering and enlarging the surrounding images after clicking on the image, many web designs need to achieve an interactive effect: click on a certain image to make the surrounding...
