HTML Tutorial: Lists and Tables | Web Development Tutorials #7

HTML Tutorial: Lists and Tables | Web Development Tutorials #7

Lists and tables are two of the most commonly used elements in HTML. They are both very useful for displaying data in a structured way, but they are each best suited for different purposes. In this tutorial, we’ll take a look at how to create both lists and tables in HTML, and when you might want to use each one.

Lists

Lists are a way of displaying data in a simple, easy-to-read format. There are two types of lists in HTML: unordered lists and ordered lists.

Unordered Lists

Unordered lists are created using the

(unordered list) element. Each list item within an unordered list is marked up using the
• (list item) element. By default, unordered list items are displayed with bullet points. Here’s an example of an unordered list:
  • List item 1

  // How does this spacing work? I’m using double spaces after each bullet point because the preview function is messing up my spacing for some reason…. sorry about that! //

  • List item 2

  // Is there a way to force the preview function not to do that??? //

  • List item 3

  // I tried adding “

  " before the code and "

  ” after the code but that didn’t work…//

  as you can see, each list item is indented relative to the other items in the list. This is because unordered lists are meant to be displayed vertically, one after the other.

  If you want to change the bullet style for an unordered list, you can use the list-style-type property. This property can be set to any of the following values: disc, circle, square, none. The default value is disc. Here’s an example of how to change the bullet style:

  // how does this work? what exactly does “style=list-style type:square” mean/do?//
  • List item 1

  // sorry about all these comments… I just want to make sure I understand everything as best as possible 😀 Thanks!!!//

  • List item 2

  // Is there a limit on how many characters I can have in each line before it wraps around??? It’s happening right now with this comment…//

  • List item 3

  As you can see from the above example, setting the list-style-type property to square changes the bullet style from a disc to a square.

  You can also use CSS to style your unordered lists further. For example, you could change the padding or margins around each list item, or change the color or font-size of the text within each list item.

  Ordered Lists

  Ordered lists are created using the

  (ordered list) element. Just like with unordered lists, each list item within an ordered list is marked up using the
  1. (list item) element. By default, ordered list items are displayed with numbers corresponding to their position in the list. Here’s an example of an ordered list:
     // how does this work? why isn’t there a space between “
     ” and “
     1. ” like there was with “
        ” and “
        • ” ???//
        • List item 1

        // again with these double spaces… sorry about that 🙁 Thanks!!!//

        • Link Text
          List Item 2 Text
          

     Adding links and text formatting within ordered lists.

     You can add links within your ordered lists just like you would with any other type of content on your web page.

     You can also apply text formatting to your content within ordered lists.