- Set different list item markers for ordered lists
- Set different list item markers for unordered lists
- Set an image as the list item marker
In HTML, there are two types of lists:
- unordered lists – the list items are marked with bullets
- ordered lists – the list items are marked with numbers or letters
The List Item marker can be set using the “list style type” property.
ul {
list-style-type : disc;
}Some of the property values are for unordered lists, and some for ordered lists.
Values for Unordered Lists
| Value | Description |
|---|---|
| none | No marker |
| disc | Default. The marker is a filled circle |
| circle | The marker is a circle |
| square | The marker is a square |
Values for Ordered Lists
| Value | Description |
|---|---|
| armenian | The marker is traditional Armenian numbering |
| decimal | The marker is a number |
| decimal-leading-zero | The marker is a number padded by initial zeros (01, 02, 03, etc.) |
| georgian | The marker is traditional Georgian numbering (an, ban, gan, etc.) |
| lower-alpha | The marker is lower-alpha (a, b, c, d, e, etc.) |
| lower-greek | The marker is lower-greek (alpha, beta, gamma, etc.) |
| lower-latin | The marker is lower-latin (a, b, c, d, e, etc.) |
| lower-roman | The marker is lower-roman (i, ii, iii, iv, v, etc.) |
| upper-alpha | The marker is upper-alpha (A, B, C, D, E, etc.) |
| upper-latin | The marker is upper-latin (A, B, C, D, E, etc.) |
| upper-roman | The marker is upper-roman (I, II, III, IV, V, etc.) |
Note: No versions of Internet Explorer (including IE8) support the property values “decimal-leading-zero”, “lower-greek”, “lower-latin”, “upper-latin”, “armenian”, or “georgian” UNLESS a DOCTYPE is specified!
Set an Image as the List Item Marker
If you want to use a different item marker than the one pre-defined for use on every browser, you can customize your own marker by using the “list-style-image” property.
E.g. list-style-image : url(‘triangle.png’);
Some browser such as Internet Explorer and Opera will display the marker a little bit higher than Firefox, Chrome or Safari. to solve this, you can do it like this:
ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
li
{
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}
Code Explained:
Setting the list style type to none, removes the item marker; and putting both margin and padding to zero makes the marker to be at a given position of origin that’s inline with the item marker’s initial position, so now you can place an image in that position using the background image property and using the background position move it into the given item marker space.
How to use Tables in CSS
At the beginning of this tutorial, you can see that we used a table to show the example of unordered and ordered item marker. we’re able to do that using the HTML tag <table>. In CSS we can use the table selector and design it the way we want it, to suite our HTML design tables. we can add a background, text, change fonts and even table borders using all of the CSS selectors we’ve learned in our previous tutorials. Lets see an Example.
table, th, td
{
border: 1px solid black;
}
In HTML our code will be:
<html>
<head>
<style type="text/css">
table, th, td
{
border: 1px solid black;
}
</style>
</head>
<body>
<table border="1" width="100%">
<tr><th>Words</th>
<th>Meaning</th>
<th>Sentence</th></tr>
<tr><td>Computer</td>
<td>An automated machine</td>
<td>I have a Computer</td></tr>
<tr><td>Learn</td>
<td>To acquire Knowledge</td>
<td>I want to learn HTML</td></tr>
<tr><td>URL</td>
<td>Consist of a file over the Internet</td>
<td>What is the URL of your website</td></tr>
</table>
</body>
</html>
it will look like this on your browser
| Words | Meaning | Sentence |
|---|---|---|
| Computer | An automated machine | I have a Computer |
| Learn | To acquire Knowledge | I want to learn HTML |
| URL | Consist of a file over the Internet | What is the URL of your website |
Styling your Tables
you can use other CSS property value to style virtually everything in a Table, such as text, font, background, color, borders etc.
To join a border that is from two different tables, you can use the border collapse property in your CSS code to define if the border in a table should be collapsed or separated.
table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}Example of a joined table without using the border-collapse property HTML Code.
<html>
<head>
<style type="text/css">
table,th, td
{
border: 1px solid black;
}
</style>
</head>
<table border="1" width="100%">
<tr><td>This is a Text</td></tr>
<tr><td>This is another Text</td></tr>
</table>
<table border="1" width="100%">
<tr><td>This is a Text</td></tr>
<tr><td>This is another Text</td></tr>
</table>
</html>
Click to see a Stand alone example Table 1
As you can see, both borders from the two tables are shown that they’re joined together by two separate walls, to make these two tables have a single border, that’s where the border-collapse property comes in, it merges both table borders together as one instead of two.Let see the work over example.
<html>
<head>
<style type="text/css">
table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}
</style>
</head>
<table border="1" width="100%">
<tr><td>This is a Text</td></tr>
<tr><td>This is another Text</td></tr>
</table>
<table border="1" width="100%">
<tr><td>This is a Text</td></tr>
<tr><td>This is another Text</td></tr>
</table>
</html>
Click to see a Stand alone example Table 2
As you can see now, the borders looks as though its a single border on both tables.
Width and Height
Width and height of a table is defined by the width and height properties.
The example below sets the width of the table to 100%, and the height of the th elements to 50px:
table
{
width:100%;
}
th
{
height:50px;
}
Click to see a Stand alone example Table 3
Table Color
The example below specifies the color of the borders, and the text and background color of th elements:
table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
Click to see a Stand alone example Table 4
Keep practicing with List styles and Tables, note that you can use any CSS property in making your Tables as beautiful as possible, just try it out, the more you practice the better you’ll become.
| Back | Main: CSS Programming | Previous Lesson: IDs & Classes | Next Lesson: Box Model |
