Styling table

HTML & CSS
1

Hello. How can I use CSS to set the table width and the width of the second column?

<table>
	<tr>
		<th>Plan:</th>
		<td>Silver Plan</td>
	</tr>
	<tr>
		<th>Cost:</th>
		<td>$40.00</td>
	</tr>
</table>

Thanks.

2

I assume that I should be using CSS versus HTML, right?

3

The answer to your question was given long before you asked it. :slightly_smiling_face:

Please read it and do some practice exercises afterwards to apply your newly acquired knowledge.

Table elements can be given classes just like other html elements. Then you can hook styles to those classes or directly to the element itself if it doesn’t conflict with other tables on your site. Same as with any other html element.

Pay particular attention to this section when you reach it …

Table styling quick tips

Before moving on, we thought we’d provide you with a quick list of the most useful points illustrated above:

  • Make your table markup as simple as possible, and keep things flexible, e.g. by using percentages, so the design is more responsive.
  • Use table-layout : fixed to create a more predictable table layout that allows you to easily set column widths by setting width on their headings ( <th> ).
  • Use border-collapse : collapse to make table elements borders collapse into each other, producing a neater and easier to control look.
  • Use <thead> , <tbody> , and <tfoot> to break up your table into logical chunks and provide extra places to apply CSS to, so it is easier to layer styles on top of one another if required.
  • Use zebra striping to make alternative rows easier to read.
  • Use text-align to line up your <th> and <td> text, to make things neater and easier to follow.

After you have set some styles on your table then post back with your CSS and HTML if you have problems.

3 Likes
4

Hi there UpstateLeafPeeper,

here is a basic example…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
body {
    background-color: #f0f0f0;
    font: normal 1em / 1.6em  sans-serif;
 }
table {
	width: 80%;
	margin: auto;
	border: 1px solid #000;
	border-collapse: collapse;
    background-color: #fff;
 }
 tr:nth-child( even ) {
 	background-color: #eef;
 }
th {
	width: 6em;
 }
td {
	padding: 1em;
 }    
</style>

</head>
<body>

<table>
 <tbody>
  <tr>
   <th scope="row">Plan:</th>
   <td>Silver Plan</td>
  </tr>
  <tr>
   <th scope="row">Cost:</th>
   <td>$40.00</td>
  </tr>
 </tbody>
</table>

</body>
</html>

coothead

1 Like
5

@Ray.H,

Thanks for the reply. When I posted last night I wasn’t sure where to start, and when I Googled things, I apparently wasn’t searching for the right terms.

I found some old code on my site with HTML tables, so that gave me some clues.

That, and apparently my Internet has been down all afternoon and so I didn’t see your response?!

Thanks!

6

Thanks @coothead - you’re helpful as always!

7

By the way, what CSS styles can I apply to a TR? (I see that @coothead applied background shading, but can I do things like add padding, margins, etc?

8

Generally speaking, one would just style the <th> and <td>
rather than the <tr>.

I am sorry that I did not do that in my example, which has had
the result of, unfortunately, sending your thoughts in the wrong
direction.

There is no other good reason, that I can think of, for styling the
<tr> other than to avoid this special case…

 tr:nth-child( even ) th,
 tr:nth-child( even ) td {
 	background-color: #eef;
 }

Someone else may have valid instances for <tr> styling that
have eluded me.

coothead

1 Like
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.