A Smarter Way To Learn HTML & CSS(2015)

46
Tables:
spacing part 2

By default, browsers adjust cell size to contents. If you write…

<table>
<tr>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
</tr>
<tr>
<td>Rome</td>
<td>Addis Ababa</td>
<td>Cairo</td>
<td>Saint Seabury on the Thames</td>
<td>Dublin</td>
</tr>
</table>

…the browser displays this…(I’ve styled it with a border and padding and collapsed the spaces between cells.)

The browser has used space efficiently, assigning just enough width to fit everything in. I think this looks better:

Instead of letting the browser allocate space on the basis of need, I styled the cells so they’d all be 20% of the width of the full table. In other words, they’d all be the same width.

th, td {
border: 1px solid black;
padding: 5px;
width: 20%;
}

When I specify cell width instead of letting the browser allocate space based on content, I force the browser to automatically wrap longer text lines so they fit into my chosen width.

I could, if I wanted to, define some CSS classes or ids to make different cells different widths.

Next point: I’m not sure I want the table to be so big. So I’ll force the browser to give me a narrower table by specifying its width as less than 100%. I’ll tell it to make it three-quarters the width of the window or div that it sits in.

table {
width:75%;
}

This is the result.

Notice that the browser automatically wraps longer lines into multiple lines to fit them into the width.

1. In your HTML file code a simple table with two rows and two columns. Give it an id.

2. In your CSS file reduce the table’s width to a fraction of the window’s width.

3. Make the two rows equal.

Sample HTML code is at:
http://asmarterwaytolearn.com/htmlcss/practice-46-1.html.

Sample CSS code is at:
http://asmarterwaytolearn.com/htmlcss/practice-46-2.html.

Find the interactive coding exercises for this chapter at:
http://www.ASmarterWayToLearn.com/htmlcss/46.html

All materials on the site are licensed Creative Commons Attribution-Sharealike 3.0 Unported CC BY-SA 3.0 & GNU Free Documentation License (GFDL)

If you are the copyright holder of any material contained on our site and intend to remove it, please contact our site administrator for approval.

A Smarter Way To Learn HTML & CSS(2015)

46Tables:spacing part 2

46
Tables:
spacing part 2