Exercise
Enter the following URL into your browser http://indigomelody.com/confident-web-design/files to download a zip file containing some example images to use on your website. Extract the folder and place it in the same directory as your index.html file, then add all five raster images to your webpage. Decide on an order for the images and ensure that you populate the alt text attribute. Then alter the widths of the images to try to get all five to render on the same line. If you are feeling curious, why not see what happens when you move one of the images outside of the images’ directory. Notice how the browser handles your alt text attribute. This is what a screen reader would see.
Tables were once the main layout element of the web. They were truly on every single webpage. Before we had better styling controls with CSS, we would position everything inside one big table and break up the content into the various cells and columns. Fortunately this awkward method of laying out a website is no longer necessary, though this doesn’t mean that tables have lost their place entirely on the web. They are still the preferred method of displaying structured data, and can be extremely useful for this purpose. Let’s check out how to create one ourselves.
A table consists of headers, rows and columns. Each row should have a header (even if it is blank), and each row should have the same number of columns as there are headers defined.
Now let’s break down how we build a simple table. Tables are defined and contained within a <table> tag. Then within the opening and closing tags of the table, we can start to specify our rows. Our first row is going to be our header row, so we must create a new row using the <tr> tag, like so: