I'm just trying to get some help making the table in vertical alignment. My problem is that it shifted the td text to the left.
<!DOCTYPE HTML>
<HTML>
<head>
<meta charset="utf-8">
<title>Web Colors</title>
</head>
<style>
table,td, th{
border: 1px solid black;
border: double;
}
td{
display: table-row;
vertical-align: middle;
}
</style>
<body>
<table style="width: 60%; margin: 0px auto;">
<tr>
<th>Web Colors</th>
<tr>
<td style="background-color:#ffffcc;">
#ffffcc
</td>
<td style="background-color:#66ffff;">
#66ffff
</td>
<td style="background-color:#ffff22;">
#ffff22
</td>
<td style="background-color:#999999;">
#999999
</td>
<td style="background-color:#ff0000;">
#ff0000
</td>
<td style="background-color:#ff8429;">
#ff8429
</td>
</tr>
</table>
</body>
</html>
This is what it should look like but it doesn't
This is what it actually looks like
This is what it looks like but it needs the colors to fill the table and the text to be the center
Try this!
Hope it helps :)
<!DOCTYPE HTML>
<HTML>
<head>
<meta charset="utf-8">
<title>Web Colors</title>
</head>
<style>
table, th {
border: 1px solid black;
border: double;
}
td {
display: block;
text-align: center;
border: 2px solid gray;
}
</style>
<body>
<table style="width: 60%; margin: 0px auto;">
<tr>
<th>Web Colors</th>
<tr>
<td style="background-color:#ffffcc;">
#ffffcc
</td>
<td style="background-color:#66ffff;">
#66ffff
</td>
<td style="background-color:#ffff22;">
#ffff22
</td>
<td style="background-color:#999999;">
#999999
</td>
<td style="background-color:#ff0000;">
#ff0000
</td>
<td style="background-color:#ff8429;">
#ff8429
</td>
</tr>
</table>
</body>
</html>
If you need each color on its own table row then your missing some code
for each row you need:
<tr> <!-- Start of row -->
<td>Color 1</td>
</tr> <!-- End of row -->
so your table code should look like:
<table>
<tr> <!-- 1st row -->
<td>Color 1</td>
</tr> <!-- End of 1st row -->
<tr> <!-- 2nd row -->
<td>Color 2</td>
</tr> <!-- End of 2nd row -->
<tr> <!-- 3rd row -->
<td>Color 3</td>
</tr> <!-- End of 3rd row -->
</table>
Related
Is there a way to target the bottom tds of just the first and second rows?
I have tried just using tr > td{border-bottom:black solid 1px;} but it goes through all tds.
<!DOCTYPE html>
<html>
<head>
<title>Index.html</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<table>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
Heres what I have so far for css
td{
height:100px;
width:100px;
}
tr > td:nth-of-type(1){
border-right:1px solid black;
}
tr > td:nth-of-type(3){
border-left:1px solid black;
}
Sure you can use this:
tr:nth-of-type(-n + 2) > td:nth-of-type(-n +2){
border-bottom:1px solid black;
}
working example:
td{
height:100px;
width:100px;
}
tr > td:nth-of-type(1){
border-right:1px solid black;
}
tr > td:nth-of-type(3){
border-left:1px solid black;
}
tr:nth-of-type(-n + 2) > td:nth-of-type(-n +2){
border-bottom:1px solid black;
}
<!DOCTYPE html>
<html>
<head>
<title>Index.html</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<table>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
Yes, with :nth-of-type you can do for example this:
selecting nothing but the first 2 tr and nothing but the first 2 td inside
td{
height:100px;
width:100px;
}
tr > td:nth-of-type(1){
border-right:1px solid black;
}
tr > td:nth-of-type(3){
border-left:1px solid black;
}
table tr:nth-of-type(-n+2) td:nth-of-type(-n+2){
border-bottom: 1px solid black;
}
<!DOCTYPE html>
<html>
<head>
<title>Index.html</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<table>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
For a traditional grid of nine squares, you can use table tr:not(:last-child) td to target all cells in all rows except the last one:
td{
height:100px;
width:100px;
}
tr > td:nth-of-type(1){
border-right:1px solid black;
}
tr > td:nth-of-type(3){
border-left:1px solid black;
}
table tr:not(:last-child) td {
border-bottom: 1px solid black;
}
<!DOCTYPE html>
<html>
<head>
<title>Index.html</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<table>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
Changing that to table tr:not(:last-child) td:not(:last-child) will target the first two squares in each row, leaving the third column bare.
I have a little problem:
I have one table per row with different columns, and I need to have the first and the second column with the same width percentage so I have used inline-block inside td elements. My problem is that when I don't put text inside td the border of the cell renders differently than a td with text.
What can I do?
I have found that putting: inside, the td works fine, but I don't like this solution.
table {
color: black;
font-family: Verdana;
background-color: yellow;
}
td {
border: 1px solid black;
text-align: left;
padding: 1px;
}
<div style="width:100%">
<tr>
<table style="width:100%;">
<tr>
<td style="width:20%;display:inline-block;">a1</td>
<td style="width:33%;display:inline-block;"></td>
<td style="width:33%;display:inline-block;">a3</td>
<td style="width:10%;display:inline-block;">a4</td>
</tr>
</table>
</tr>
<tr>
<table style="width:100%">
<tr>
<td style="width:20%;display:inline-block;">b1</td>
<td style="width:33%;display:inline-block;"> </td>
<td style="width:40%;display:inline-block;">b3</td>
</tr>
</table>
</tr>
</div>
for td tag in css use min-height attribute
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de estilos CSS en el propio documento</title>
<style type="text/css">
table {
color: black;
font-family: Verdana;
background-color: yellow;
}
td {
border: 1px solid black;
min-height: 20px;
text-align: left;
padding: 1px;
}
</style>
</head>
<body>
<div style="width:100%">
<table style="width:100%;">
<tr>
<td style="width:20%;display:inline-block;">a1</td>
<td style="width:33%;display:inline-block;"></td>
<td style="width:33%;display:inline-block;">a3</td>
<td style="width:10%;display:inline-block;">a4</td>
</tr>
</table>
<table style="width:100%">
<tr>
<td style="width:20%;display:inline-block;">b1</td>
<td style="width:33%;display:inline-block;"> </td>
<td style="width:40%;display:inline-block;">b3</td>
</tr>
</table>
</tr>
</div>
</body>
</html>
I want to apply a background color for the first row in the table. I gave that row a special class name. I also want to apply another color for the rest of the table's rows. The row colors do not get applied.
.table {
font-family: sans-serif;
width: auto;
overflow: auto;
display: block;
border: 1;
}
/*I want the row with class head to be this color*/
.head {
background-color: yellow;
}
/*I want the rest of the table rows this color*/
.table td {
background-color: lightblue;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="new-style.css">
<meta charset="UTF-8">
</head>
<body id="body">
<table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">
<tr id="head" class="head">
<td class="head">Name</td>
<td class="head">Type</td>
</tr>
<tr id="initial-row">
<td width=200> text here</td>
<td width=200> text here </td>
</tr>
<tr id="second-row">
<td width=200> text here </td>
<td width=200>text here </td>
</tr>
</table>
</body>
</html>
You're problem is with specificity and order - as you have put the light blue on the td, you need to override that with the yellow on the td too.
You then need to move the yellow declaration below the initial declaration as it is to the same specificity - this means order of the statements matter.
One final thing - remove display:block from the table, otherwise you will break the layout of the table.
.table {
font-family: sans-serif;
width: auto;
overflow: auto;
border: 1;
width:100%;
/* remove display block from here otherwise your table layout will break */
}
/*put this first*/
.table td {
background-color: lightblue;
}
/*override with this*/
.head td {
background-color: yellow;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="new-style.css">
<meta charset="UTF-8">
</head>
<body id="body">
<table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">
<tr id="head" class="head">
<td class="head">Name</td>
<td class="head">Type</td>
</tr>
<tr id="initial-row">
<td width=200> text here</td>
<td width=200> text here </td>
</tr>
<tr id="second-row">
<td width=200> text here </td>
<td width=200>text here </td>
</tr>
</table>
</body>
</html>
More information on css specificity
One solution is to increase the specificity of the CSS settings for .head
.table {
font-family: sans-serif;
width: auto;
overflow: auto;
display: block;
border: 1;
}
/*I want the row with class head to be this color*/
.table .head {
background-color: yellow;
}
/*I want the rest of the table rows this color*/
.table td {
background-color: lightblue;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="new-style.css">
<meta charset="UTF-8">
</head>
<body id="body">
<table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">
<tr id="head" class="head">
<td class="head">Name</td>
<td class="head">Type</td>
</tr>
<tr id="initial-row">
<td width=200> text here</td>
<td width=200 > text here </td>
</tr>
<tr id="second-row">
<td width=200 > text here </td>
<td width=200 >text here </td>
</tr>
</table>
</body>
</html>
Btw, I just noticed that you use table as a class, maybe you should use another name ... more specific
In addiction to Pete's answer, I would like to say that if you want to create a table header to use the proper tag <th>
<tr>
<th class="head">Name</th>
<th class="head">Type</th>
</tr>
The <th> tag defines a header cell in an HTML table.
An HTML table has two kinds of cells:
Header cells - contains header information (created with the element)
Standard cells - contains data (created with the element) The text in elements are bold and centered by default.
.table {
font-family: sans-serif;
width: auto;
overflow: auto;
display: block;
border: 1;
}
/*I want the row with class head to be this color*/
th {
background-color: yellow;
}
/*I want the rest of the table rows this color*/
.table td {
background-color: lightblue;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="new-style.css">
<meta charset="UTF-8">
</head>
<body id="body">
<table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">
<tr id="head" class="head">
<th class="head">Name</th>
<th class="head">Type</th>
</tr>
<tr id="initial-row">
<td width=200> text here</td>
<td width=200> text here </td>
</tr>
<tr id="second-row">
<td width=200> text here </td>
<td width=200>text here </td>
</tr>
</table>
</body>
</html>
Remove the class head in the tr then add !important. For some reason the color is not changing without !important even if I re-arranged the css
.table {
font-family: sans-serif;
width: auto;
overflow: auto;
display: block;
border: 1;
}
/*I want the row with class head to be this color*/
.head {
background-color: yellow !important;
}
/*I want the rest of the table rows this color*/
.table td {
background-color: lightblue;
}
<body id="body">
<table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">
<tr id="head">
<td class="head">Name</td>
<td class="head">Type</td>
</tr>
<tr id="initial-row">
<td width=200> text here</td>
<td width=200> text here </td>
</tr>
<tr id="second-row">
<td width=200> text here </td>
<td width=200>text here </td>
</tr>
</table>
</body>
As #Pete mentioned, your specificity is incorrect. On a side note, your HTML markup could be improved to use the <thead> also and then your css could simply target <th> elements within the <thead>. This is better for accessibility as it clearly defines you "head" as a table header.
Take a look at the w3c docs on <table> markup for accessibilty # https://www.w3.org/WAI/tutorials/tables/
or for general information about the markup check out the amazing Mozilla documentation # https://developer.mozilla.org/en/docs/Web/HTML/Element/table
Something like this:
.table {
font-family: sans-serif;
width: auto;
overflow: auto;
display: block;
border: 1;
}
/*I want the row with class head to be this color*/
thead th {
background-color: yellow;
}
/*I want the rest of the table rows this color*/
tbody td {
background-color: lightblue;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="new-style.css">
<meta charset="UTF-8">
</head>
<body id="body">
<table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">
<thead>
<tr id="head">
<th>Name</td>
<th>Type</td>
</tr>
</thead>
<tbody>
<tr class="initial-row">
<td>Text here</td>
<td>Text here</td>
</tr>
<tr class="second-row">
<td>Text here</td>
<td>Text here</td>
</tr>
</tbody>
</table>
</body>
</html>
<tr id="head" class="head">
<th class="head">Name</td> <!-- change to th (table heading) -->
<th class="head">Type</td>
</tr>
css:
th{
background-color: yellow;
}
/*I want the rest of the table rows this color*/
.table tr {
background-color: lightblue;
}
/*I want the row with class head to be this color*/
.head {
background-color: yellow;
}
I think that should be codes above.
How would I achieve this table layout?
Here's a sample:
<!doctype html>
<html>
<head>
<title>Rows Demo </title>
<style>
table {
border: 1px solid black;
}
td {
border:1px solid blue;
}
</style>
</head>
<body>
<table>
<tr>
<td rowspan=2>Something</td>
<td rowspan=2>Something more</td>
<td>LastColumn</td>
</tr>
<tr>
<td>Column3</td>
</tr>
<tr>
<td rowspan=2>Something</td>
<td rowspan=2>Something more</td>
<td>LastColumn</td>
</tr>
<tr>
<td>Column3</td>
</tr>
</table>
</body>
</html>
I have a problem with Internet Explorer 9 and fixed height of a td
I need a td with 5px height but in IE9 its bigger than 5px.
In Chrome, Firefox and Safari it works
I tried with a transparent 1px gif to insert in the td, I set the font-size: 0px; line-height: 0px and it still won't work.
My test code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>test</title>
<style>
.space{
height: 5px;
width: 5px;
font-size: 0px;
line-height: 0px;
background: none;
}
table{
border-spacing: 0px;
table-layout: fixed;
}
td{
background-color: red;
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" style="width: 1200px;">
<tr >
<td rowspan="5"> test1<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br><br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br> </td>
<td rowspan="5" class="space"> </td>
<td rowspan="5"> test2<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br><br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br> </td>
<td rowspan="5" class="space"> </td>
<td> test3</td>
</tr>
<tr>
<td class="space"> spacer</td>
</tr>
<tr>
<td> test 5</td>
</tr>
<tr>
<td class="space"> spacer</td>
</tr>
<tr>
<td> test 5</td>
</tr>
</table>
</body>
</html>
I have two images:
Chrome (working):
IE9:
You can place a div inside the td with a height of 5px. http://jsfiddle.net/aCrbz/3/
<td><div class="foo"></div></td>