Embedded Files
So far, the tables you’ve created have been a little difficult to read because they have no borders.
In older versions of HTML, a border could be added to a table using the border attribute and setting it equal to an integer. This integer would represent the thickness of the border.
<table border="1">
<tr>
<td>73</td>
<td>81</td>
</tr>
</table>
The code in the example above is deprecated, so please don’t use it. It’s meant to illustrate older conventions you may come across when reading other developers’ code.
The browser will likely still interpret your code correctly if you use the border attribute, but that doesn’t mean the attribute should be used.
We use CSS to add style to HTML documents, because it helps us to separate the structure of a page from how it looks. You can learn more about CSS in our CSS courses.
You can achieve the same table border effect using CSS.
table, td {
border: 1px solid black;
}
The code in the example above uses CSS instead of HTML to show table borders.
Instructions
Instructions
1. We’re going to need some more data in the table. Add the following data to the table. Make sure to place it after the second table row.
<tr>
<td>Davie's Burgers</td>
<td>2</td>
<td>Send Invoice</td>
</tr>
<tr>
<td>Baker's Bike Shop</td>
<td>3</td>
<td>Send Invoice</td>
</tr>
<tr>
<td>Miss Sally's Southern</td>
<td>4</td>
<td>Ship</td>
</tr>
<tr>
<td>Summit Resort Rentals</td>
<td>4</td>
<td>Ship</td>
</tr>
<tr>
<td>Strike Fitness</td>
<td>1</td>
<td>Enter Order</td>
</tr>
index.html
index.html
<!DOCTYPE html>
<html>
<head>
<title>Ship To It - Company Packing List</title>
<link href="https://fonts.googleapis.com/css?family=Lato: 100,300,400,700|Luckiest+Guy|Oxygen:300,400" rel="stylesheet">
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<ul class="navigation">
<li><img src="https://content.codecademy.com/courses/web-101/unit-9/htmlcss1-img_logo-shiptoit.png" height="20px;"></li>
<li class="active">Action List</li>
<li>Profiles</li>
<li>Settings</li>
</ul>
<div class="search">Search the table</div>
<table>
<tr>
<th scope='col'>Company Name</th>
<th scope='col'>Number of Items to Ship</th>
<th scope='col'>Next Action</th>
</tr>
<tr>
<td>Adam's Greenworks</td>
<td>14</td>
<td>Package Items</td>
</tr>
</table>
</body>
</html>
Style.css
Style.css
body {
background: #EEE;
margin: 0;
padding: 0;
}
/* Navigation */
.navigation {
box-sizing: border-box;
background-color: #3587A4;
overflow: auto;
padding: 18px 50px;
position: relative;
top: 0;
width: 100%;
z-index: 999;
}
ul {
padding: 0;
margin: 0;
}
li {
color: #FFF;
display: inline-block;
font-family: 'Oxygen', sans-serif;
font-size: 16px;
font-weight: 300;
letter-spacing: 2px;
margin: 0;
padding: 20px 18px 10px 18px;
text-transform: uppercase;
}
.active {
color: #88CCF1;
}
/* Table */
table {
height: 40%;
left: 10%;
margin: 20px auto;
overflow-y: scroll;
position: static;
width: 80%;
}
thead th {
background: #88CCF1;
color: #FFF;
font-family: 'Lato', sans-serif;
font-size: 16px;
font-weight: 100;
letter-spacing: 2px;
text-transform: uppercase;
}
tr {
background: #f4f7f8;
border-bottom: 1px solid #FFF;
margin-bottom: 5px;
}
th, td {
font-family: 'Lato', sans-serif;
font-weight: 400;
padding: 20px;
text-align: left;
width: 33.3333%;
}
.search {
background-color: #FFF;
border: 1px solid #DDD;
border-radius: 3px;
color: #AAA;
padding: 20px;
margin: 50px auto 0px auto;
width: 77%;
}
Page updated
Report abuse