archive-am.com » AM » H » HTML.AM

Total: 543

Choose link from "Titles, links and description words view":

Or switch to "Titles and links view".
  • HTML Tables
    tr table Table Header Table Header Table cell 1 Table cell 2 Table cell 3 Table cell 4 The code above uses the table tags to create the outer table Then it uses the tr tags to define each table row The th tags define the table header cells and the td tags define each table data cell Note that the table header cells display the text slightly differently to the table data cells This is because the table headers are supposed to stand out This example uses Cascading Style Sheets CSS to determine how the table looks This is everything between the opening and closing style tags You can actually remove this code and the table will be a normal looking HTML table Nothing wrong with that Of course you can also modify the CSS code to give your HTML tables a unique look and feel Same Table Different Style Below is an example of the same HTML table but with a different set of styles In other words the HTML table has been coded using the exactly the same HTML code as the one in the above example The only difference is that it references a different stylesheet i e it uses class myOtherTable instead of class myTable This demonstrates how changing the CSS part of the code can have a huge impact on how the HTML table is displayed in the browser Source Code Result Start Styles Move the style tags and everything between them to between the head tags style type text css myOtherTable width 400px background color FFFFE0 border collapse collapse color 000 font size 18px myOtherTable th background color BDB76B color white width 50 font variant small caps myOtherTable td myOtherTable th padding 5px border 0 myOtherTable td font family Georgia Garamond serif border

    Original URL path: http://www.html.am/html-codes/tables/ (2016-02-17)
    Open archived version from archive


  • Table Background Color
    the td tag of the table cell in question Source Code Result table style background color FFFFE0 tr style background color BDB76B color ffffff th Table Header th th Table Header th tr tr td Table cell 1 td td Table cell 2 td tr tr td Table cell 3 td td style background color ff0000 Table cell 4 td tr table Table Header Table Header Table cell 1 Table cell 2 Table cell 3 Table cell 4 Using CSS Classes It s good practice to keep your CSS separate from the table when setting its styles For example you can define all your styles at the top of your HTML document or even in a separate CSS file When you do this you can create a class that holds all the styles for your table or any other element Then to use these styles you simply add class class name where class name is the name of your class Here s an example of using an embedded style sheet to define the background color of your HTML tables Note that the styles are set in between the style style tags Source Code Result Start Styles Move the style tags and everything between them to between the head tags style type text css myTable background color eee border collapse collapse myTable th background color 000 color white width 50 myTable td myTable th padding 5px border 1px solid 000 style End Styles table class myTable tr th Table Header th th Table Header th tr tr td Table cell 1 td td Table cell 2 td tr tr td Table cell 3 td td Table cell 4 td tr table Table Header Table Header Table cell 1 Table cell 2 Table cell 3 Table cell 4 Here s another example

    Original URL path: http://www.html.am/html-codes/tables/table-background-color.cfm (2016-02-17)
    Open archived version from archive

  • Table Border
    Header th th Table Header th tr tr td Table cell 1 td td Table cell 2 td tr tr td Table cell 3 td td Table cell 4 td tr table Table Header Table Header Table cell 1 Table cell 2 Table cell 3 Table cell 4 Source Code Result table style border 3px dashed blue tr th Table Header th th Table Header th tr tr td Table cell 1 td td Table cell 2 td tr tr td Table cell 3 td td Table cell 4 td tr table Table Header Table Header Table cell 1 Table cell 2 Table cell 3 Table cell 4 Source Code Result table style border 5px double black tr th Table Header th th Table Header th tr tr td Table cell 1 td td Table cell 2 td tr tr td Table cell 3 td td Table cell 4 td tr table Table Header Table Header Table cell 1 Table cell 2 Table cell 3 Table cell 4 Borders on Table Cells To the table cells within the table you need to apply the border code against the individual table cells In the following example I ve applied a border against the table cells and the table header cells I ve also applied a different colored border around the table as I did in the previous example The different color will help distinguish between the table border and the cell borders Source Code Result table style border 1px solid black tr th style border 1px solid red Table Header th th style border 1px solid red Table Header th tr tr td style border 1px solid red Table cell 1 td td style border 1px solid red Table cell 2 td tr tr td style border 1px solid red Table cell 3 td td style border 1px solid red Table cell 4 td tr table Table Header Table Header Table cell 1 Table cell 2 Table cell 3 Table cell 4 Border Collapse You can remove the space between the different borders by using the CSS border collapse property You can apply this property against the HTML table element When you apply this against the table element you ll notice that the table border simply disappears or collapses You ll also notice that the space between the cells collapse too Example Source Code Result table style border 1px solid black border collapse collapse tr th style border 1px solid red Table Header th th style border 1px solid red Table Header th tr tr td style border 1px solid red Table cell 1 td td style border 1px solid red Table cell 2 td tr tr td style border 1px solid red Table cell 3 td td style border 1px solid red Table cell 4 td tr table Table Header Table Header Table cell 1 Table cell 2 Table cell 3 Table cell 4 Using CSS Classes If you re familiar with HTML and CSS you ll probably know about

    Original URL path: http://www.html.am/html-codes/tables/table-border.cfm (2016-02-17)
    Open archived version from archive

  • Table Color
    td Table cell 4 td tr table Table Header Table Header Table cell 1 Table cell 2 Table cell 3 Table cell 4 Table Cell Background Color You can change the background color of an individual table cell Source Code Result table style background color FFFFE0 tr style background color BDB76B th Table Header th th Table Header th tr tr td Table cell 1 td td Table cell 2 td tr tr td Table cell 3 td td style background color red Table cell 4 td tr table Table Header Table Header Table cell 1 Table cell 2 Table cell 3 Table cell 4 Table Text Color You can change the color of text within a table To change the color of the text within the table you need to use the color property By the way you don t need to apply this element against each piece of text you can apply it to the whole table In this example I change the color of the text to black but I also change the table header text to white Source Code Result table style background color FFFFE0 color black tr style background color BDB76B color white th Table Header th th Table Header th tr tr td Table cell 1 td td Table cell 2 td tr tr td Table cell 3 td td Table cell 4 td tr table Table Header Table Header Table cell 1 Table cell 2 Table cell 3 Table cell 4 Table Border Color You can set a table border and change its color too To do this you can use the border property You also need to specify how wide the border is and what style Example Source Code Result table style background color FFFFE0 color black border 1px solid BDB76B tr style background color BDB76B color white th Table Header th th Table Header th tr tr td Table cell 1 td td Table cell 2 td tr tr td Table cell 3 td td Table cell 4 td tr table Table Header Table Header Table cell 1 Table cell 2 Table cell 3 Table cell 4 You ll notice that adding the border property against the table element only puts a border around the table not the individual table cells To have a border around each cell you need to apply the border element against each cell There s a quick and easy way to do this CSS classes In the following example we use CSS classes to set the border color and other properties against the table and its cells Table Color with CSS Classes You should use CSS classes where ever possible when setting styles for your HTML documents You can define these classes in an embedded style sheet or external style sheet Here s an example of using an embedded style sheet to define the styles of your HTML tables Note that the styles are set in between the opening and closing style tags Source Code Result

    Original URL path: http://www.html.am/html-codes/tables/table-color.cfm (2016-02-17)
    Open archived version from archive

  • Table Text
    4 td tr table Table Header Table Header Table cell 1 Table cell 2 Table cell 3 Table cell 4 Table Row To change the text style in a whole table row you can apply the CSS against the tr tag Example Source Code Result table border 1 style font family Georgia Garamond Serif color blue font style italic tr style font variant small caps font style normal color black font size 18px th Table Header th th Table Header th tr tr td Table cell 1 td td Table cell 2 td tr tr td Table cell 3 td td Table cell 4 td tr table Table Header Table Header Table cell 1 Table cell 2 Table cell 3 Table cell 4 Table Text with CSS Classes Using CSS classes is a more efficient way of setting your styles You simply create a class using a name of your choosing then apply styles against that class Then you can refer to that class from anywhere within your HTML document Here s an example of using an embedded style sheet to define the styles of your HTML tables Note that the styles are set in between the opening and closing style tags Source Code Result Start Styles Move the style tags and everything between them to between the head tags style type text css myTable background color FFFFE0 border collapse collapse font family Georgia Garamond Serif color black myTable th width 50 font bold 18px 1 1em Arial Helvetica Sans Serif text shadow 1px 1px 4px black letter spacing 0 3em background color BDB76B color white myTable td myTable th padding 5px border 1px solid BDB76B myTable td line height 2 5em style End Styles table class myTable tr th Table Header th th Table Header th tr tr td

    Original URL path: http://www.html.am/html-codes/tables/table-text.cfm (2016-02-17)
    Open archived version from archive

  • Links
    Roy Glacier Open Link in New Window If you want the page to open in a new window you can add target blank to your code Like this Source Code Result p Here s another glacier in New Zealand a href http www travel explorer com fox glacier new zealand target blank Fox Glacier a p Here s another glacier in New Zealand Fox Glacier Named Anchors You can make the browser jump to a certain spot in the page by using a named anchor To do this you use the document URL followed by a followed by the anchor name The anchor name must exist somewhere in the target document To place an anchor into the target document use a name a and replace with a name of your choice In the example below Source Code Result p Jump down to a href http www html am html codes links my named anchor My Named Anchor a p p p p p p p a name my named anchor a p My Named Anchor p Jump down to My Named Anchor My Named Anchor Image Links You can place the link code around an image too This will link the image to the URL specified Like this Source Code Result a href http www travel explorer com boracay philippines target blank img src http www html am images html codes links boracay white beach sunset 300x225 jpg width 300 height 225 alt Photo of White Beach in Boracay Philippines a HTML Link Generator You can also use this HTML link generator to generate the HTML code for your hyperlinks HTML Tutorial HTML Templates HTML Codes Text Code Table Code Link Code HTML Image Link Email Link Open in New Window Remove Underline CSS Hover Image Code Color Code Background

    Original URL path: http://www.html.am/html-codes/links/ (2016-02-17)
    Open archived version from archive

  • HTML Image Link
    browsers don t In order to keep your images looking consistent it pays to add some code so that the image displays consistently throughout different browsers Add a Border To add a border to your image you should use the CSS border property Source Code Result a href http www travel explorer com boracay philippines target blank img src http www html am images html codes links boracay white beach sunset 300x225 jpg width 300 height 225 alt Photo of White Beach in Boracay Philippines style border 1px solid black a Remove Borders If you prefer not to have a border around your image simply modify the width of the border to zero i e border 0 Example Source Code Result a href http www travel explorer com boracay philippines target blank img src http www html am images html codes links boracay white beach sunset 300x225 jpg width 300 height 225 alt Photo of White Beach in Boracay Philippines style border 0 a Thumbnail Images You can link to a larger version of a smaller image The smaller image is often referred to as a thumbnail image or simply just a thumbnail To do this you should have two images a small image i e the thumbnail and a large image It is possible to use one image and simply resize it using HTML but that usually defeats the purpose of creating a thumbnail Creating a separate thumbnail image allows you to use a smaller less bandwidth intensive image for the thumbnail and a larger more detailed image for the full sized image Simply resizing the image will use the same bandwidth regardless Using thumbnail images you can link to the actual full sized image or to an HTML page that embeds the full sized image Either way is

    Original URL path: http://www.html.am/html-codes/links/html-image-link.cfm (2016-02-17)
    Open archived version from archive

  • Email Link
    parameter and subsequent parameters should be preceded by an ampersand instead of a question mark In other words only the first parameter should have a question mark All others should be preceded by an ampersand Example Source Code Result a href mailto barney example com cc fred example com amp bcc wilmer example com Email Barney Today a Email Barney Today Adding a Subject Line You can also pre populate the subject line To do this simply add subject followed by whatever you want to appear as the subject of the email Example Source Code Result a href mailto barney example com subject About your bouncy ball Email Barney Today a Email Barney Today Adding Body Text You can also pre populate the actual content of the email using a similar technique to adding the subject line To add body text to your email add body followed by whatever you want to appear within the email s contents Example Source Code Result a href mailto barney example com subject About your bouncy ball amp body Hey Barney Is your bouncy ball still for sale Email Barney Today a Email Barney Today Spaces Carriage Returns and Ampersands When creating an email link as with any HTML link you should use amp to represent the ampersand It s also good practice to use 20 in place of all spaces and 0D 0A in place of all carriage returns i e when you want a space such as when you d normally use the Enter key When I say that it s good practice to do this I mean some browsers email clients behave differently and may or may not show spaces and carriage returns the way you d like Therefore using the method outlined here will ensure that your users see what

    Original URL path: http://www.html.am/html-codes/links/email-link.cfm (2016-02-17)
    Open archived version from archive