Web Designing 101 Class



Excellent work!

Now, let us look at it in detail.

HTML Table - Adding a Border

If you do not specify a border for the table, it will be displayed without borders.

A border is set using the CSS border property, in our mycss.css, we have set the border here:

td, th { border: 1px solid #dddddd; text-align: left; padding: 8px; }


HTML Table - Collapsed Borders

If you want the borders to collapse into one border, add the CSS border-collapse property, in mycss.css, we have done it like this:

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;


HTML Table - Adding Cell Padding

Cell padding specifies the space between the cell content and its borders.

If you do not specify a padding, the table cells will be displayed without padding.

To set the padding, use the CSS padding property, in mycss.css, we have done it this way:

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;


HTML Table - Left-align Headings

By default, table headings are bold and centered.

To left-align the table headings, use the CSS text-align property:

td, th {
    border: 1px solid #dddddd;
    **text-align: left;**
    padding: 8px;


Please what does this mean?

tr:nth-child(even) {
background-color: #dddddd;


@Angie, do this:

In mycss.css, set your table header to align to the right.


<tr> - is use to create a cell in your table
<th> - is the header of each column
<td> - is the data your putting in your cell.


I’ll explain this when we get to CSS full time. For now, ignore.


Please what is padding?


Change this line in the td,th line of your mycss.css to 0px :slight_smile:

padding: 8px;

Padding is basically the space between the line above your td and below it? It’s like a compressor. Change it to 0 on your css and refresh the web page to understand what I mean.


I do. Gracias :blush:


Now let us discuss Lists. Lists are very important because its more or less how this is created in a web page

But before then, I want to examine a tag called <div> .

A div is basically a section on your webpage. In a more realistic scenario, the body in your webpage should be enclosed in a div tag. So it should look something like this :slight_smile:


<p>   A paragraph in my body </p>


So the idea is that you enclose every section of your webpage in a div.


Now, adjust your web page thus

Enclose your

in a div

Do the same for your paragraphs.

Paste the result when your done.


My div tag did not reflect in my web page…


Its not supposed to reflect. we are just dividing our page into divs


Now let us discuss how lists work first.

There are 2 types on lists:

  1. Unordered List

An unordered list starts with the<ul> tag. Each list item starts with the <li> tag.

The list items will be marked with bullets (small black circles) by default:


  1. Ordered List

An ordered list starts with the

    tag. Each list item starts with the
  1. tag.

    The list items will be marked with numbers by default:



Okay. Maybe I was expecting to see a demarcating line or box of some sort.


Now @Angie, add 1 unordered list to your html page and 1 ordered list as well.


Also note that we can use the combination of <ul> , <li> and <a> tags to create an horizontal navigation bar. In fact it’s what most people use.