The following is a list of the accepted HTML (HyperText Markup Language) elements (or called tags) that are allowed to be posted. Use the tags how you would use them normally for a web page.

You can also add a "style" attribute to most of the tags below. Within that, you can add various properties, such as font size, color, width and others, where they apply. A companion tutorial on adding inline CSS (Cascading Style Sheets) to HTML tags can be found here. It contains a complete listing of the allowed CSS you can use to customize your message.

We will now discuss the various parts of the sample code below.In that example, "div" is an HTML element. Most HTML elements have an opening and closing tag which surround content. "style" is an attribute. The value of that attribute is located within double quotation marks ("). An equals sign (=) is between the two. The "style" attribute allows you to set inline CSS. "background-color" and "padding" are CSS properties. You can have as many properties within that single style attribute, separated by a semicolon (;). (you can't have more than one "style" attribute) The "background-color" property has a value of "lightblue". The "padding" property has a value of "10px". The space after the ":" and ";" are not required, but we include them for legibility. In short, that gives you a basic tutorial of what terms we will use here and in our CSS tutorial.

Any HTML tag that is not listed below is not allowed.

To view a tutorial on how to display an image in your message, click here. It goes into detail about how to get the image address (URL) for an image or about using an image-sharing site if you need to upload an image from your computer first. One you have an image address, you can simply use the method described later on this page.

For some elements, like <img/>, <hr/> and <br/>, you will see that we add a "/" at the end of the tag so that the tag is shown as self-closing. We write it that way because there is no closing tag for that particular element. (Meaning it isn't like most tags, such as this for example: <span>Text</span>) We try to follow a stricter coding standard, more closely resembling XHTML. (Extensible HyperText Markup Language) In that, an element must have a closing tag. Our system adds that character in automatically if you do not include it.Table of Contents:

• <span>
  More Info: W3Schools | Mozilla
  
  The <span> element is a generic inline container. This can be used to customize text.
  
  If you place two <span> elements together, the second one appears on the same line. This is because it is an inline element. See the example below. The <div> element is a generic block-level container. If you were two place two <div> elements together, the second one would appear below the other. To format a specific line of text, or various words, you could do that with a <span> element. But if you wanted to format a section of content, which could also include a lot of text, a <div> element would be more appropriate. See that section for an example.
  
  Example 1:

  Code:

  A line of text before the "span" tag. <span style="background-color: lightblue;">A line of text.</span> <span style="background-color: lightgreen;">A second line of text.</span> A line of text after the "span" tag.

  Result:

  A line of text before the "span" tag. A line of text. A second line of text. A line of text after the "span" tag.

  Example 2:

  Code:

  <span style="font-size: 20px; font-family: Arial; font-weight: bold; text-decoration: underline; font-style: italic; color: blue;">The quick brown fox jumps over the lazy dog.</span>

  Result:

  The quick brown fox jumps over the lazy dog.

  Example 3:

  Code:

  <span style="text-decoration: line-through;">Text with a line through it.</span>

  Result:

  Text with a line through it.

  Example 4:

  Code:

  <span style="direction: rtl; unicode-bidi: bidi-override;">This text is reversed.</span>

  Result:

  This text is reversed.

  Example 5:

  Code:

  Default text. <span style="color: green;">Green colored text, <span style="font-weight: bold;">with bold here</span>, using a "span" inside a "span" element.</span>

  Result:

  Default text. Green colored text, with bold here, using a "span" inside a "span" element.
• Bold
  More Info on <b> tag: W3Schools | Mozilla
  
  A <b> element used to be more commonly known as the "boldface" element. While it does make text bold in browsers, other tags are now preferred to help specify why the text is bold.
  
  In our system, <b> is automatically converted to <span style="font-weight: bold;"> and </b> is automatically converted to </span>.
  
  Example 1:

  Code:

  <b>A line of bold text.</b>

  Result:

  A line of bold text.

  Example 2:

  Code:

  <span style="font-weight: bold;">A line of bold text.</span>

  Result:

  A line of bold text.
• Italic
  More Info on <i> tag: W3Schools | Mozilla
  
  A <i> element used to be more commonly known as the "italic" element. While it does make text slanted in browsers, other tags might be preferred to help specify why the text is emphasized.
  
  In our system, <i> is automatically converted to <span style="font-style: italic;"> and </i> is automatically converted to </span>.
  
  Example 1:

  Code:

  <i>A line of text in italics.</i>

  Result:

  A line of text in italics.

  Example 2:

  Code:

  <span style="font-style: italic;">A line of text in italics.</span>

  Result:

  A line of text in italics.
• Underline
  More Info on <u> tag: W3Schools | Mozilla
  
  A <u> element used to be more commonly known as the "underline" element. While it does underline text in browsers, other tags might be preferred to help specify why the text is being singled out. Because the text is rendered with an underline, and can be confused for a link, it should be avoided where it could be mistaken for a link.
  
  In our system, <u> is automatically converted to <span style="text-decoration: underline;"> and </u> is automatically converted to </span>.
  
  Example 1:

  Code:

  <u>A line of text underlined.</u>

  Result:

  A line of text underlined.

  Example 2:

  Code:

  <span style="text-decoration: underline;">A line of text underlined.</span>

  Result:

  A line of text underlined.
• Link (<a href="">)
  More Info: W3Schools | Mozilla
  
  The <a> (anchor) element is used to create a link.
  
  The "href" attribute, which we require, is where you specify the link.
  
  If you would like the link to open in a new window, use the "target" attribute and set its value to "_blank".
  
  On our site, you can also add a link using specific code that can be used to create a link. You can add it using the "Link" button below the message box. Examples 3 and 4 demonstrate the code that is used for that feature. When using that feature, the link will always open in a new window.
  
  Example 1:

  Code:

  <a href="https://hurricanecity.com/">HurricaneCity.com</a>

  Result:

  HurricaneCity.com

  Example 2:

  Code:

  <a href="https://hurricanecity.com/" target="_blank">HurricaneCity.com</a>

  Result:

  HurricaneCity.com

  Example 3 (shortcut for our message board):

  Code:

  [url]https://hurricanecity.com/[/url]

  Result:

  https://hurricanecity.com/

  Example 4 (shortcut for our message board):

  Code:

  [url="https://hurricanecity.com/"]HurricaneCity.com[/url]

  Result:

  HurricaneCity.com
• Line break (<br/>)
  More Info: W3Schools | Mozilla
  
  The <br/> element is used to create a line break.
  
  We don't allow any CSS to be used for this element.
  
  In our forum, we try to automatically create line breaks for you based on what you enter in the message box. In most instances, if you press enter inside the message box, that is where we will attempt to place a line break. Press enter twice and you will have a blank line separating two sections of text. That is shown in example 3. The code that we actually use to do that, which we do automatically for you, is shown in example 2.
  
  You should not need to actually use this element yourself. If you did, and also used the "enter" button, you would get twice as many line breaks.
  
  Because we automatically try to create line breaks for you, it gets complex to try to determine where you intend to have line breaks and where you do not intend to have line breaks, such as when using a <div> tag for example. It's not a perfect process. You may have to move certain tags or content next to each other, and continue to preview your message, to ensure that line breaks are where you want them.
  
  Example 1:

  Code:

  Line 1<br/>Line 2

  Result:

  Line 1
  Line 2

  Example 2:

  Code:

  Line 1<br/><br/>Line 2

  Result:

  Line 1
  
  Line 2

  Example 3 (shortcut for our message board):

  Code:

  Line 1
  
  Line 2

  Result:

  Line 1
  
  Line 2
• Subscript (<sub>)
  More Info: W3Schools | Mozilla
  
  The <sub> element is used to create subscript text, such as for a chemical formula.
  
  We don't allow any CSS to be used for this element.
  
  We also show you an alternative way to write it using a span element.
  
  Example 1:

  Code:

  H₂O

  Result:

  H₂O

  Example 2:

  Code:

  H<span style="vertical-align: sub; font-size: smaller;">2</span>O

  Result:

  H2O
• Superscript (<sup>)
  More Info: W3Schools | Mozilla
  
  The <sup> element is used to create superscript text, such as for an exponent.
  
  We don't allow any CSS to be used for this element.
  
  We also show you an alternative way to write it using a span element.
  
  Example 1:

  Code:

  E = mc²

  Result:

  E = mc²

  Example 2:

  Code:

  E = mc<span style="vertical-align: super; font-size: smaller;">2</span>

  Result:

  E = mc2
• Strike-through (<s>)
  More Info: W3Schools | Mozilla
  
  The <s> element is used to draw a line through text, with a strike through the text.
  
  We don't allow any CSS to be used for this element.
  
  We also show you an alternative way to write it using a span element.
  
  Example 1:

  Code:

  <s>The quick brown fox jumps over the lazy dog.</s>

  Result:

  The quick brown fox jumps over the lazy dog.

  Example 2:

  Code:

  <span style="text-decoration: line-through;">The quick brown fox jumps over the lazy dog.</span>

  Result:

  The quick brown fox jumps over the lazy dog.
• Centered Text
  More Info: W3Schools | Mozilla
  
  The <center> element was previously used to center not only inline content, but also block-level content. This element has deprecated and should no longer be used.
  
  In our system, <center> is automatically converted to <div style="text-align: center;"> and </center> is automatically converted to </div>.
  
  It should be noted that our system converts this tag to a span tag that will center text. That will not allow it to center a block-level element, like a <div> element. To center a block-level element you would need to use margin which we show in an example 3 below.
  
  Example 1:

  Code:

  <center> Centered Text </center>

  Result:

  Centered Text

  Example 2:

  Code:

  <div style="text-align: center;"> Centered Text </div>

  Result:

  Centered Text

  Example 3:

  Code:

  <div style="margin: 0 auto; background: lightgreen; max-width: 150px;"> Text in box </div>

  Result:

  Text in box

  In the previous example, note how the <div> element is centered, but the inline content within it, the text, is not centered.
  
  Example 4:

  Code:

  <div style="margin: 0 auto; text-align: center; background: lightgreen; max-width: 150px;"> Text in box </div>

  Result:

  Text in box

  In the previous example, we now also center the text as well.

• <div>
  More Info: W3Schools | Mozilla
  
  The <div> element is a generic block-level container. The name "div" might come from "document division", as it is described in an older specification. This can be used to customize a section of content, which could also include a lot of text.
  
  If you place two <div> elements together, the second one appears below the other. This is because it is a block-level element. See the example below. The <span> element is a generic inline container. If you were two place two <span> elements together, they would appear on the same line. To format a section of content, which could also include a lot of text, you could do that with a <div> element. But if you wanted to format a specific line of text, or various words, a <span> element would be more appropriate. See that section for an example.
  
  Example 1:

  Code:

  A line of text before the "div" tag. <div style="background-color: lightblue; padding: 10px; font-size: 17px;"> Text in a box. </div> <div style="background-color: lightgreen; padding: 10px; font-size: 17px;"> Text in another box. </div> A line of text after the "div" tag.

  Result:

  A line of text before the "div" tag.

  Text in a box.

  Text in another box.

  A line of text after the "div" tag.

  Example 2:

  Code:

  <div style="background-color: lightblue; color: blue; padding: 10px; font-size: 17px;"> Text in a box. <span style="color: green;">But this is an example of using span here for this specific text.</span> </div>

  Result:

  Text in a box. But this is an example of using span here for this specific text.
• Paragraph (<p>)
  More Info: W3Schools | Mozilla
  
  The <p> element is a block-level container. This can be used for a paragraph of text. It adds a margin, of about the line-height of one line of text, above and below the paragraph.
  
  Because our site automatically inserts line breaks (<br/>), using this element isn't as necessary when it comes to a visual standpoint. If you add two line breaks between text you enter, meaning you hit enter in the message box twice between the end of one line of text and the start of another, you will simulate the visual effect of this element if you have no other style that you are adding.
  
  Example 1:

  Code:

  A line of text before the "p" tag. <p> Text in a paragraph. </p> <p> Text in another paragraph. </p> A line of text after the "p" tag.

  Result:

  A line of text before the "p" tag.

  Text in a paragraph.

  Text in another paragraph.

  A line of text after the "p" tag.

  Example 2:

  Code:

  A line of text before the "p" tag. <p style="background-color: lightblue; padding: 10px; font-size: 17px;"> Text in a paragraph. </p> <p style="background-color: lightgreen; padding: 10px; font-size: 17px;"> Text in another paragraph. </p> A line of text after the "p" tag.

  Result:

  A line of text before the "p" tag.

  Text in a paragraph.

  Text in another paragraph.

  A line of text after the "p" tag.
• Preformatted Text (<pre>)
  More Info: W3Schools | Mozilla
  
  The <pre> element displays text exactly as entered, preserving all spaces and using a monospaced font. This is helpful for text messages from NOAA when you need to preserve the text formatting so that data, in columns for example, is preserved. This can apply to such things as an advisory from the National Hurricane Center, a National Weather Service Public Information Statement, a SHIPS intensity forecast, the Plan of the Day for the hurricane hunters or a Daily Climate Report (CLI) from the NWS.
  
  This can also be used for more fun purposes, like for ASCII art displayed in an example below from an ASCII art generator. (using the font setting described as "Big" on some sites that have a similar generator)
  
  Example, part of the Daily Climate Report for St. Louis, Missouri on July 26th, 2022 when they experienced record rainfall:

  Code:

  <pre> WEATHER ITEM OBSERVED TIME RECORD YEAR NORMAL DEPARTURE LAST VALUE (LST) VALUE VALUE FROM YEAR NORMAL ................................................................... PRECIPITATION (IN) TODAY 8.64R 2.24 1909 0.13 8.51 0.00 MONTH TO DATE 11.05 3.29 7.76 5.71 SINCE JUN 1 12.84 7.78 5.06 11.04 SINCE JAN 1 32.17 25.65 6.52 28.63 </pre>

  Result:

  WEATHER ITEM   OBSERVED TIME   RECORD YEAR NORMAL DEPARTURE LAST
                  VALUE   (LST)  VALUE       VALUE  FROM      YEAR
                                                    NORMAL
  ...................................................................
  PRECIPITATION (IN)
    TODAY            8.64R         2.24 1909   0.13   8.51     0.00
    MONTH TO DATE   11.05                      3.29   7.76     5.71
    SINCE JUN 1     12.84                      7.78   5.06    11.04
    SINCE JAN 1     32.17                     25.65   6.52    28.63

  Example 2:

  Code:

  <pre> _____ _______ _ _ / ____| |__ __| | | | | | __ _ _ __ ___| | __ _| | | __ | | / _` | '_ \ / _ \ |/ _` | | |/ / | |___| (_| | | | | __/ | (_| | | < \_____\__,_|_| |_|\___|_|\__,_|_|_|\_\ </pre> And without "pre": <div> _____ _______ _ _ / ____| |__ __| | | | | | __ _ _ __ ___| | __ _| | | __ | | / _` | '_ \ / _ \ |/ _` | | |/ / | |___| (_| | | | | __/ | (_| | | < \_____\__,_|_| |_|\___|_|\__,_|_|_|\_\ </div>

  Result:

     _____              _______    _ _    
    / ____|            |__   __|  | | |   
   | |     __ _ _ __   ___| | __ _| | | __
   | |    / _` | '_ \ / _ \ |/ _` | | |/ /
   | |___| (_| | | | |  __/ | (_| | |   < 
    \_____\__,_|_| |_|\___|_|\__,_|_|_|\_\

  And without "pre":

  _____ _______ _ _
  / ____| |__ __| | | |
  | | __ _ _ __ ___| | __ _| | | __
  | | / _` | '_ \ / _ \ |/ _` | | |/ /
  | |___| (_| | | | | __/ | (_| | | <
  \_____\__,_|_| |_|\___|_|\__,_|_|_|\_\
  

  Example 3:

  Code:

  <pre style="line-height: 1;"> _____ _______ _ _ / ____| |__ __| | | | | | __ _ _ __ ___| | __ _| | | __ | | / _` | '_ \ / _ \ |/ _` | | |/ / | |___| (_| | | | | __/ | (_| | | < \_____\__,_|_| |_|\___|_|\__,_|_|_|\_\ </pre>

  Result:

     _____              _______    _ _    
    / ____|            |__   __|  | | |   
   | |     __ _ _ __   ___| | __ _| | | __
   | |    / _` | '_ \ / _ \ |/ _` | | |/ /
   | |___| (_| | | | |  __/ | (_| | |   < 
    \_____\__,_|_| |_|\___|_|\__,_|_|_|\_\

  If you don't like the default "line-height", you can customize it to make the horizontal text lines closer together.
• Headings (<h1> to <h6>)
  More Info: W3Schools | Mozilla
  
  The elements <h1> to <h6> are used for HTML headings. A heading of <h1> is the heading of highest importance and you should only have one <h1> element on a page, though we have no limit on the amount you have. The heading of least importance is <h6>.
  
  Example:

  Code:

  <h1>Heading h1</h1> <h2>Heading h2</h2> <h3>Heading h3</h3> <h4>Heading h4</h4> <h5>Heading h5</h5> <h6>Heading h6</h6>

  Result:

  Heading h1

  Heading h2

  Heading h3

  Heading h4

  Heading h5

  Heading h6

• Horizontal Rule (<hr/>)
  More Info: W3Schools | Mozilla
  
  The <hr/> element displays a horizontal line. It used to refer to "horizontal rule" and was to act as a visual divider between sections. It is now known as a "thematic break" and while "previous versions of HTML defined the hr element only in presentational terms, the element has now been given the specific semantic purpose of representing a 'paragraph-level thematic break'."
  
  We allow limited CSS to be used for this element.
  
  Example 1:

  Code:

  <hr/>

  Result:

  ---

  Example 2:

  Code:

  <hr style="margin: 50px 0px; border: 1px dashed orange;"/>

  Result:

  ---

• Blockquote (<blockquote>)
  More Info: W3Schools | Mozilla
  
  The <blockquote> element is used to indicate that the enclosed text is a quotation. Visually, it has a margin on all four sides. We previously added this element because a social media site previously used it and we needed to add support for it.
  
  Example 1:

  Code:

  A line of text before the "blockquote" tag. <blockquote> "Four score and seven years ago our fathers brought forth, upon this continent, a new nation, conceived in liberty, and dedicated to the proposition that all men are created equal." </blockquote> A line of text after the "blockquote" tag.

  Result:

  A line of text before the "blockquote" tag.

  "Four score and seven years ago our fathers brought forth, upon this continent, a new nation, conceived in liberty, and dedicated to the proposition that all men are created equal."

  A line of text after the "blockquote" tag.

  Example 2:

  Code:

  A line of text before the "blockquote" tag. <blockquote style="padding: 15px; background: #eee; border-radius: 20px; text-align: justify;"> "Four score and seven years ago our fathers brought forth, upon this continent, a new nation, conceived in liberty, and dedicated to the proposition that all men are created equal." </blockquote> A line of text after the "blockquote" tag.

  Result:

  A line of text before the "blockquote" tag.

  "Four score and seven years ago our fathers brought forth, upon this continent, a new nation, conceived in liberty, and dedicated to the proposition that all men are created equal."

  A line of text after the "blockquote" tag.

• <img src="">
  More Info: W3Schools | Mozilla
  
  This element allows you to embed an externally hosted image.
  
  The "src" attribute, which we require, is where you specify the link to the image.
  
  We also allow the "alt" attribute. (about: W3Schools | Mozilla)
  
  The "alt" attribute should be used so that people with screen readers can be able to have the text in that attribute read to them. We allow you to provide a brief description of up to 200 simple characters. Unless the image is not displayed for some reason, this text will not appear visually. If you don't add the "alt" attribute, we add a blank "alt" attribute when your image is posted.
  
  We don't allow the "title" attribute. This is because a screen reader might read both that attribute and the "alt" attribute, saying the same thing twice if you used both the same thing for each. The "title" attribute could create a tooltip over the image if the user hovered their mouse over it, but since that requires interaction from a mouse, which the user might not have, it is not recommended and we therefore don't allow it.
  
  On our site, you can also add an image using specific code that can be used to embed an image. You can add it using the "Image" button below the message box. Example 2 demonstrates the code that is used for that feature.
  
  We have a tutorial on adding images here.
  
  Example 1:

  Code:

  <img src="https://canetalk.com/images/lightning.jpg"/>

  Result:

  

  Example 2 (shortcut for our message board):

  Code:

  [img]https://canetalk.com/images/lightning.jpg[/img]

  Result:

  

  Example 3, where the "alt" attribute doesn't display visually:

  Code:

  <img src="https://canetalk.com/images/lightning.jpg" alt="Lightning strike in Tampa, Florida"/>

  Result:

  
• Figure (<figure>)
  More Info: W3Schools | Mozilla
  
  This element can be used with the <figcaption> element to display a caption alongside an image. If used without a caption, it would normally display an image with only margins alongside the caption. On our site however, we either draw a box around the image and the caption or just the image.
  
  Example 1:

  Code:

  <figure> <img src="https://canetalk.com/images/lightning.jpg"/> <figcaption>A lightning strike in Tampa, Florida on October 12th, 2002.</figcaption> </figure>

  Result:

  

  Example 2:

  Code:

  <figure> <img src="https://canetalk.com/images/lightning.jpg"/> </figure>

  Result:

  

• Figure Caption (<figcaption>)
  More Info: W3Schools | Mozilla
  
  The <figcaption> element contains a caption for a <figure> element.
  
  See <figure> element for examples.
  
  

• Ordered list (<ol>)
  More Info: W3Schools | Mozilla
  
  The <ol> element allows you to create an ordered list. Each item in the list must be defined by a list item (<li>) element. While the default is a numerical list, you can change it to alphabetical, Roman numerals or a few other options on our site. You can learn more on our CSS tutorial page in the section "list-style-type".
  
  We support the attribute "start" for this element. This starts the list at that number. If you wanted to start at 4 in a numerical list, your tag would be <ol start="4">. If you have letters for your "list-style-type", you still use a number. To start at "d" you would set "start" to "4".
  
  Allowed values for the attribute "start":

  • -1000 to 1000

  We also support the attribute "reversed" for this element. This reverses the order of the list. We support reversed written as <ol reversed> or in the XML compliant way as <ol reversed="reversed">.
  
  Example 1:

  Code:

  <ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol>

  Result:

  1. Item 1
  2. Item 2
  3. Item 3

  Example 2:

  Code:

  <ol style="list-style-type: lower-roman;"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol>

  Result:

  1. Item 1
  2. Item 2
  3. Item 3

  Example 3:

  Code:

  <ol start="4"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol>

  Result:

  4. Item 1
  5. Item 2
  6. Item 3

  Example 4:

  Code:

  <ol start="4" style="list-style-type: lower-roman;"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol>

  Result:

  4. Item 1
  5. Item 2
  6. Item 3

  Example 5:

  Code:

  <ol start="-10"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol>

  Result:

  -10. Item 1
  -9. Item 2
  -8. Item 3

  Example 6:

  Code:

  <ol reversed="reversed"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol>

  Result:

  1. Item 1
  2. Item 2
  3. Item 3
• Unordered list (<ul>)
  More Info: W3Schools | Mozilla
  
  The <ul> element allows you to create an unordered list. Each item in the list must be defined by a list item (<li>) element. You can change the marker type used by setting the property "list-style-type". You can learn more about that on our CSS tutorial page by clicking that link.
  
  Example 1:

  Code:

  <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>

  Result:

  • Item 1
  • Item 2
  • Item 3

  Example 2:

  Code:

  <ul style="list-style-type: square;"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>

  Result:

  • Item 1
  • Item 2
  • Item 3
• List item (<li>)
  More Info: W3Schools | Mozilla
  
  The <li> element defines a list item. It is used in ordered lists (<ol>) and unordered lists (<ul>). See those tags for examples.

• Table tag (<table>)
  More Info: W3Schools | Mozilla
  
  The <table> element allows you to create a table which can contain data that is presented in rows and columns.
  
  You can add simple tables to your message. Within each table you can add other HTML as well, like images and links. We require that all table elements have a closing tag. If using some of the optional table elements, they must be in the order: table caption (<caption>), table column group (<colgroup>), table head (<thead>), table body (<tbody>) and table foot (<tfoot>).
  
  Our site has a default styling for tables in a message which you will see in example 1. You can change it somewhat using inline CSS. See the tables section in our CSS tutorial for table specific CSS and other sections for additional CSS you can try to use.
  
  If you want to set the width in a <table> tag, you can only set a "width" using a percent. You can set a "max-width" using pixels or a percent. You can set the "width" of a table data cell (<td>) using pixels or a percent since the maximum width of the "table" tag will either force the table to stay within the visible area of the screen or if needed the table may be partially hidden. This could happen on a mobile device or on any device for a table that is very wide. We no longer support older attributes like "cellpadding", "cellspacing" or "border". You will need to use the CSS counterpart for those.
  
  See the table data cell section <td> for simple examples using the attributes "colspan" and "rowspan".
  
  Example 1:

  Code:

  <table> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </table>

  Result:

  1	2
  3	4

  Example 2:

  Code:

  <table style="max-width: 550px; height: 400px;"> <tr> <td> A <table style="border: 1px solid orange; max-width: 400px; padding: 10px;"> <tr style="background-color: #cc0000;"> <td style="text-align: justify;"> A1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </td> <td style="width: 60px;"> A2 </td> <td rowspan="2" style="width: 60px; text-align: right;"> A3 </td> </tr> <tr> <td colspan="2" style="height: 75px; vertical-align: bottom; text-align: center; background-color: green;"> A4 </td> </tr> <tr> <td colspan="3" style="width: 120px; height: 100px; color: #dddddd; font-weight: bold; font-size: 18px; font-family: Arial;"> A5 </td> </tr> </table> B </td> </tr> </table>

  Result:

  A A1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A2 A3 A4 A5 B

  Example 3:

  Code:

  The code for this chart can be found here.

  Result:

  Dvorak Current Intensity Chart

  Current Intensity (CI) Number	Mean Wind Speed (knots)	Mean Wind Speed (mph)	MSLP in Millibars (Atlantic)	MSLP in Millibars (NW Pacific)	Saffir-Simpson Category (Approximate)
  1	25 kts	29 mph
  1.5	25 kts	29 mph
  2	30 kts	35 mph	1009 mb	1000 mb
  2.5	35 kts	40 mph	1005 mb	997 mb
  3	45 kts	52 mph	1000 mb	991 mb
  3.5	55 kts	63 mph	994 mb	984 mb
  4	65 kts	75 mph	987 mb	976 mb	1 (64-82 kts)
  4.5	77 kts	89 mph	979 mb	966 mb	1 (64-82 kts); 2 (83-95 kts)
  5	90 kts	104 mph	970 mb	954 mb	2 (83-95 kts); 3 (96-112 kts)
  5.5	102 kts	117 mph	960 mb	941 mb	3 (96-112 kts)
  6	115 kts	132 mph	948 mb	927 mb	4 (113-136 kts)
  6.5	127 kts	146 mph	935 mb	914 mb	4 (113-136 kts)
  7	140 kts	161 mph	921 mb	898 mb	5 (137 kts or higher)
  7.5	155 kts	178 mph	906 mb	879 mb	5 (137 kts or higher)
  8	170 kts	196 mph	890 mb	858 mb	5 (137 kts or higher)

  Based upon: https://www.ospo.noaa.gov/Organization/FAQ/TropicalIntensityChart.html
• Table caption (<caption>)
  More Info: W3Schools | Mozilla
  
  The optional <caption> element adds a caption to the table. If used, it must directly follow the table tag (<table>).
  
  Example:

  Code:

  <table style="width: 100%;"> <caption> This is a caption </caption> <tbody> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </tbody> </table>

  Result:

  This is a caption

  1	2
  3	4

• Table column group (<colgroup>)
  More Info: W3Schools | Mozilla
  
  The optional <colgroup> element groups columns in a table when used with the table column (<col>) element. It can allow you to style the CSS of the columns more easily. If used, it must directly follow the table caption (<caption>). If there is no table caption, then it must directly follow the table tag (<table>).
  
  Inside this you would add table column (<col>) elements. You can learn more about that element in that section.
  
  We don't require the number of columns defined to match the number of columns in your table, as shown in example 2.
  
  Example 1:

  Code:

  <table> <colgroup> <col/> <col span="2" style="background: green;"/> <col span="1"/> </colgroup> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr> </table>

  Result:

  1	2	3	4
  5	6	7	8

  Example 2:

  Code:

  <table> <colgroup> <col/> <col span="1" style="background: green;"/> <col/> </colgroup> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> </table>

  Result:

  1	2	3
  4	5	6

• Table column (<col>)
  More Info: W3Schools | Mozilla
  
  The optional <col> element is used inside the table column group (<colgroup>) element. It can allow you to style the CSS of the columns more easily.
  
  We support the attribute "span" for this element.
  
  If you wanted a column to span 2 columns, your tag would be <col span="2">.
  
  Allowed values for the attribute "col":

  • 1 to 100

  We don't require you to have a "span" attribute. If you leave it out, it will act as if it was defined as "1".
  
  For examples, see the table column group (<colgroup>) element.
• Table head (<thead>)
  More Info: W3Schools | Mozilla
  
  The optional <thead> element contains a table row (<tr>) which itself contains either table header cells (<th>) or table data cells (<td>). This is not a required element in tables, but it can optionally be used to define a header row at the top of a table. If you use table header cells (<th>) in that table row, it will make the text bold.
  
  If used, this must appear before a table body (<tbody>) element.
  
  Example:

  Code:

  <table> <thead> <tr> <th>Col 1</th> <th>Col 2</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </tbody> </table>

  Result:

  Col 1	Col 2
  1	2
  3	4

• Table body (<tbody>)
  More Info: W3Schools | Mozilla
  
  The optional <tbody> element contains table rows (<tr>). This is not a required element in tables, but it can optionally be used to specifically define the body of your table.
  
  Rather than use this element, you can put table rows directly in a <table> element.
  
  See <table> for more information on tables.
  
  Example:

  Code:

  <table> <tbody> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </tbody> </table>

  Result:

  1	2
  3	4

• Table foot (<tfoot>)
  More Info: W3Schools | Mozilla
  
  The optional <tfoot> element contains a table row (<tr>) which contains table data cells (<td>). This is not a required element in tables, but it can optionally be used to define a footer row at the bottom of a table which could summarize things in your table. By default, our site doesn't apply any special CSS to the row.
  
  We require that you have a table body (<tbody>) element when using this element. We also require that it be placed directly after that element.
  
  Example:

  Code:

  <table> <thead> <tr> <th>Col 1</th> <th>Col 2</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </tbody> <tfoot> <tr> <td>Col 1 Summary</td> <td>Col 2 Summary</td> </tr> </tfoot> </table>

  Result:

  Col 1	Col 2
  1	2
  3	4
  Col 1 Summary	Col 2 Summary

• Table row (<tr>)
  More Info: W3Schools | Mozilla
  
  The <tr> element contains table data cells (<td>) or table header cells (<th>).
  
  See <table> for more information on tables.
  
  
• Table data cell (<td>)
  More Info: W3Schools | Mozilla
  
  The <td> element contains the content you want to put in the particular table data cell.
  
  We support the attributes "colspan" and "rowspan" for this element.
  
  If you wanted a table data cell to span 2 columns, your tag would be <td colspan="2">.
  
  Allowed values for the attribute "colspan":

  • 1 to 100

  If you wanted a table data cell to span 2 rows, your tag would be <td rowspan="2">. If you set the value to "0", it will extent to the end of the table section.
  
  Allowed values for the attribute "rowspan":

  • 0 to 1000

  See <table> for more information, and examples, on tables.
  
  Example 1:

  Code:

  <table> <tr> <td colspan="2">1</td> </tr> <tr> <td>2</td> <td>3</td> </tr> </table>

  Result:

  1
  2	3

  Example 2:

  Code:

  <table> <tr> <td rowspan="2">1</td> <td>2</td> </tr> <tr> <td>3</td> </tr> </table>

  Result:

  1	2
  	3

  Example 3:

  Code:

  <table> <tr> <td rowspan="0">1</td> <td>2</td> </tr> <tr> <td>3</td> </tr> <tr> <td>4</td> </tr> </table>

  Result:

  1	2
  3
  4

• Table header cell (<th>)
  More Info: W3Schools | Mozilla
  
  The <th> element is a table header cell which contains text defining the data in that column or row. While these can be used in a table head element <thead>, they can also be used vertically as well if needed.
  
  Like for <td>, we also support the attributes "colspan" and "rowspan" for this element.
  
  For accessibility, we also support the attribute "scope" being set to "row" or "col". For more info on that: Mozilla | World Wide Web Consortium (W3C)
  
  See <table> for more information, and examples, on tables.
  
  Example 1:

  Code:

  <table> <thead> <tr> <th>Col 1</th> <th>Col 2</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </tbody> </table>

  Result:

  Col 1	Col 2
  1	2
  3	4

  Example 2:

  Code:

  <table> <thead> <tr> <th>Data</th> <th>Col 1</th> <th>Col 2</th> </tr> </thead> <tbody> <tr> <th>Row 1:</th> <td>Data Cell 1</td> <td>Data Cell 2</td> </tr> <tr> <th>Row 2:</th> <td>Data Cell 3</td> <td>Data Cell 4</td> </tr> <tr> <th>Row 3:</th> <td>Data Cell 5</td> <td>Data Cell 6</td> </tr> </tbody> </table>

  Result:

  Data	Col 1	Col 2
  Row 1:	Data Cell 1	Data Cell 2
  Row 2:	Data Cell 3	Data Cell 4
  Row 3:	Data Cell 5	Data Cell 6