HTML and CSS programming
I am working with the following code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
td.one
{
align="center";
colspan="3";
bgcolor="lightgrey";
style="font-size:15px;font-weight:bold;"
}
</style>
</head>
<body>
<table border="1" cellspacing="1" cellpadding="1" width="100%">
<tr>
<td> </td>
<td> </td>
<td class="one">Session 1</td>
<td class="one">Session 1</td>
</tr>
</body>
This CSS doesn't work for me. I want to create classes, so different elements <td>
will have different appearances.
a source to share
You are using HTML attribute names and syntax in your stylesheet, whereas you need to use CSS names and syntax:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
td.one
{
text-align: center;
/* There no way to do colspan="3" in CSS */
background-color: lightgrey;
font-size: 15px;
font-weight:bold;
}
</style>
</head>
<body>
<table border="1" cellspacing="1" cellpadding="1" width="100%">
<tr>
<td> </td>
<td> </td>
<td class="one">Session 1</td>
<td class="one">Session 1</td>
</tr>
</body>
a source to share
There are two things in your current code. First, you are trying to set attributes td
using CSS, which is not possible - you can only change styles. You must set the attributes align
, colspan
and bgcolor
in a row (although there are some CSS equivalents of some of these).
Second, the syntax is wrong for your CSS rules. It should look like this:
td.one
{
font-size: 15px;
font-weight: bold;
}
a source to share
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
td.one
{
text-align:"Center";
background-color:Gray;
font-size:15px;
font-weight:bold;
}
</style>
</head>
<body>
<table border="1" cellspacing="1" cellpadding="1" width="100%">
<tr>
<td> </td>
<td> </td>
<td class="one" colspan="3">Session 1</td>
<td class="one">Session 1</td>
</tr>
</body>
a source to share