HTML basic fifth lecture - Control form and its entry alignment

xiaoxiao2021-03-06  18

HTML foundation fifth lecture - Control form and its entry alignment http://www.wrclub.net/ 8/29/2002 Netmaster Club By default, the form is aligned on the browser screen, you You can specify the alignment of the table using the

Align property. The Align property can take the value "Left", "Center" and "Right". For example, let a form display in the center display You can use:
Note Be careful with the align property of
, not all browsers can identify it. If you want the form to display the center of the screen, use the
identifier to include a table more secure. You can use the Align property of the
to set the horizontal alignment of each row element in the table, which can also take the value "Left", "Center" and "Right". To set the vertical alignment of all elements in a certain row, you can use the value of the , which can take the value "TOP", "Middle", and "Botton" (by default "middle"). To better control the arrangement of a header or element in the table, the value range of the , however < TH>
and identifiers can be used, the value range of the two attributes is the same as
Align and Valign properties will overwrite any arrangements for the entire row. The space of the control entry is set to the width of each column to the width of the longest entry in this column when the browser displays a table. The browser occupies the smaller screen space as much as possible to closely arrange each item in the table. You can change this default value using Cellpadding and CellsPacing properties. By using the cellpadding property, you can arrange a larger space for each of the tables, use the CellsPacing property, and you can leave a certain space between the entry. The values ​​of these two attributes are specified in pixels.

The following example illustrates how to use these two properties (see Figure 6.20): cell spacing </ title> </ head> <body> <table border = 1> <Caption> Normal Table </ Caption> <tr> <TD> First Column </ TD> <TD> Second Column </ TD> </ TR> </ Table> <HR> <Table Border = 1 Cellspacing = 20> <CAPTION> Table with Cell spacing </ caption> <tr> <TD> First Column </ TD> <TD> Second Column </ td> </ tr> </ table> <hr> <Table Border = 1 Cellpadding = 20> <CAPTION> Table with cell padding </ caption> <tr> <TD> First Column </ TD> <TD> Second Column </ TD> </ TR> </ Table> </ body> </ html> Control Form and entry Some of the size you may want to make the table displayed, you can use the <Table> width property to control the width of the table, you can provide the absolute value or relative value of the width for the width property. When providing the absolute value of the width for the width property, you are represented by pixels. For example, to establish a table with a width of 100 pixels, you can use <Table Width = 100>. Of course, it is not guaranteed that the table is displayed just that the width you specify, the content in the entry may force the table to display the value specified by the width property. Alternatively, you can also specify the width of the table with a relative value, for example, if you want the form to occupy the entire browser screen, you can use <Table Width = "100%>, the same, if you are in the width property If the percentage specified in the middle is too small, the form displayed by the browser is not that width. <HEIGHT> property can be used to specify the overall height of the table, the same attribute can take absolute value and relative value. But careful when using this property, even if Microsoft and Netscape browsers can explain it correctly, it is not part of the HTML 3.2 specification. You can also use the Width and Height properties of the <TD> and <TH> identifiers to control the size of a table in the table, you must use absolute pixel values ​​to specify the values ​​of these properties. You have to know when you set these values, just provide suggestions for your browser, the browser is trying to do it as much as possible, but it may not be able to display a form in a manner you specified. Add colors and images in the form According to HTML 3.2 specification, the table does not have any color properties. However, it is worthy of Netscape and Microsoft extended HTML to make the form their own background colors, both browsers identify the BGColor properties of the <Table> identifier.</p> <p>You can use color name or RGB values ​​to set the value of BGColor. The following example illustrates the usage of this property: <html> <head> <title> Table color </ title> </ head> <body bgcolor = "White "> <Center> <table bgcolor =" lightblue "cellpadding = 10> <tr> <td> i Have a blue background </ td> </ tr> </ table> </ center> </ body> </ html > When the text in this example is displayed on the browser, it is in a light blue box, which is useful for some specific texts in the main body text on the main page. For example, you can use this approach to highlight a reference, header, or a short comment on the webpage. You can also use the BGColor property for someone in a table in a table or even a group. For example, different colors can be used to distinguish data in the table. A more exciting place for the BGColor property may be to set the overall color of your web page. If you set the width of the table as the width of the screen, you can build a web page with multiple columns, and each column has different colors. The following example has established a web page with two columns: <html> <head> <title> two color column </ title> </ head> <body bgcolor = "white"> <center> <Table width = " 100% "Height =" 100% "> <tr> <td bgcolor =" ilive "align =" center "> i Have A Olive Background </ td> <TD bgcolor =" aqua "align =" center "> i Have A Aqua Background </ td> </ tr> </ table> </ center> </ body> </ html> Netscape and Microsoft's browser allow you to set background images for your form (see Figure 6.21), you can Specify an image by the <html> <head> <Title> TWo Color Column </ Title> <HTML> <Head> <Title> </ head> <body bgcolor = "white"> <center> <Table Width = "50%" Height = "100%" background = "MyImage.gif"> <tr> <TD align = "center"> i Have a checkered background </ td> </ tr> </ table> </ center > </ Body> </ html> Netscape Navigator 4.0 and Internet Explorer 3.0 and 4.0 also allow you to use the Background property in a list of tables or an entries in the table, using different background images with different entries, you can Build a very visible web page. Table as a sheet <Table> identifier was originally introduced to HTML to formatting information.</p></div><div class="text-center mt-3 text-grey"> 转载请注明原文地址:https://www.9cbs.com/read-44122.html</div><div class="plugin d-flex justify-content-center mt-3"></div><hr><div class="row"><div class="col-lg-12 text-muted mt-2"><i class="icon-tags mr-2"></i><span class="badge border border-secondary mr-2"><h2 class="h6 mb-0 small"><a class="text-secondary" href="tag-2.html">9cbs</a></h2></span></div></div></div></div><div class="card card-postlist border-white shadow"><div class="card-body"><div class="card-title"><div class="d-flex justify-content-between"><div><b>New Post</b>(<span class="posts">0</span>) </div><div></div></div></div><ul class="postlist list-unstyled"> </ul></div></div><div class="d-none threadlist"><input type="checkbox" name="modtid" value="44122" checked /></div></div></div></div></div><footer class="text-muted small bg-dark py-4 mt-3" id="footer"><div class="container"><div class="row"><div class="col">CopyRight © 2020 All Rights Reserved </div><div class="col text-right">Processed: <b>0.041</b>, SQL: <b>9</b></div></div></div></footer><script src="./lang/en-us/lang.js?2.2.0"></script><script src="view/js/jquery.min.js?2.2.0"></script><script src="view/js/popper.min.js?2.2.0"></script><script src="view/js/bootstrap.min.js?2.2.0"></script><script src="view/js/xiuno.js?2.2.0"></script><script src="view/js/bootstrap-plugin.js?2.2.0"></script><script src="view/js/async.min.js?2.2.0"></script><script src="view/js/form.js?2.2.0"></script><script> var debug = DEBUG = 0; var url_rewrite_on = 1; var url_path = './'; var forumarr = {"1":"Tech"}; var fid = 1; var uid = 0; var gid = 0; xn.options.water_image_url = 'view/img/water-small.png'; </script><script src="view/js/wellcms.js?2.2.0"></script><a class="scroll-to-top rounded" href="javascript:void(0);"><i class="icon-angle-up"></i></a><a class="scroll-to-bottom rounded" href="javascript:void(0);" style="display: inline;"><i class="icon-angle-down"></i></a></body></html><script> var forum_url = 'list-1.html'; var safe_token = 'FuwgSzXSZpUD9B5FDrDkgggWBFqLoNKxyQthSZYz1XQZzJWxRon1x_2BtFMfWzHmw5UfYU0Qf1hTT_2BpoDGChhEag_3D_3D'; var body = $('body'); body.on('submit', '#form', function() { var jthis = $(this); var jsubmit = jthis.find('#submit'); jthis.reset(); jsubmit.button('loading'); var postdata = jthis.serializeObject(); $.xpost(jthis.attr('action'), postdata, function(code, message) { if(code == 0) { location.reload(); } else { $.alert(message); jsubmit.button('reset'); } }); return false; }); function resize_image() { var jmessagelist = $('div.message'); var first_width = jmessagelist.width(); jmessagelist.each(function() { var jdiv = $(this); var maxwidth = jdiv.attr('isfirst') ? first_width : jdiv.width(); var jmessage_width = Math.min(jdiv.width(), maxwidth); jdiv.find('img, embed, iframe, video').each(function() { var jimg = $(this); var img_width = this.org_width; var img_height = this.org_height; if(!img_width) { var img_width = jimg.attr('width'); var img_height = jimg.attr('height'); this.org_width = img_width; this.org_height = img_height; } if(img_width > jmessage_width) { if(this.tagName == 'IMG') { jimg.width(jmessage_width); jimg.css('height', 'auto'); jimg.css('cursor', 'pointer'); jimg.on('click', function() { }); } else { jimg.width(jmessage_width); var height = (img_height / img_width) * jimg.width(); jimg.height(height); } } }); }); } function resize_table() { $('div.message').each(function() { var jdiv = $(this); jdiv.find('table').addClass('table').wrap('<div class="table-responsive"></div>'); }); } $(function() { resize_image(); resize_table(); $(window).on('resize', resize_image); }); var jmessage = $('#message'); jmessage.on('focus', function() {if(jmessage.t) { clearTimeout(jmessage.t); jmessage.t = null; } jmessage.css('height', '6rem'); }); jmessage.on('blur', function() {jmessage.t = setTimeout(function() { jmessage.css('height', '2.5rem');}, 1000); }); $('#nav li[data-active="fid-1"]').addClass('active'); </script>