Apparently, Google’s Dosis font screws up table layout:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<title>Test</title>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Dosis" />
<style type="text/css">
table {
width: 100%;
}
td {
outline: 1px solid red;
}
#test {
font-family: "Dosis";
}
</style>
</head>
<body>
<table id="test">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</table>
<table id="control">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</table>
</body>
</html>
In the above setting cells in the table on which Dosis is set have uneven spacing, while those in the one without a font family set are as expected.
What is suprising is that the incorrect behaviour is perfectly consistent across Firefox, Chrome and Opera.
Can anyone please explain this, and possibly give a solution?
I think it is because the width of 1,2,3,4,5 are not the same, why do I think this? Try by using the same text:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<title>Test</title>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Dosis" />
<style type="text/css">
table {
width: 100%;
}
td {
outline: 2px solid red;
}
#test {
font-family: 'Dosis';
}
</style>
</head>
<body>
<table id="test">
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</table>
<table id="control">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</table>
</body>
</html>
You can use css to make the width of td tag fixed. Or javascript to make make the width dynamically allocated.
Related
in this code ,I set a style for border of thead element , but my problem is that the border doesn't display in the browser at all.
what should i do?,please help me.thank you.
thead {
border: 3px solid red;
}
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TEST</title>
</head>
<body>
<table>
<thead>
<tr>
<th>EXAM</th>
<th>RATE</th>
</tr>
</thead>
<tbody>
<tr>
<td>MATH</td>
<td>17.50</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>TOTAL</td>
<td>17.50</td>
</tr>
</tfoot>
</table>
</body>
</html>
You cant actually add a border to the thead Element as that element exists but has no "physical representation" when beign rendered. thead and tbody are semantical only elements but you cant actually style them properly.
Id recommend moving the border to the tr childs of your thead and configure your tables border-collapse behaviour instead:
table {
border-collapse: collapse;
}
table thead tr th {
border: 3px solid red;
}
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TEST</title>
</head>
<body>
<table>
<thead>
<tr>
<th>EXAM</th>
<th>RATE</th>
</tr>
</thead>
<tbody>
<tr>
<td>MATH</td>
<td>17.50</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>TOTAL</td>
<td>17.50</td>
</tr>
</tfoot>
</table>
</body>
</html>
I'm making a quick webpage with the following HTML code
<!DOCTYPE html>
<html>
<head>
<title>Summer CTF</title>
<link ref="stylesheet" type="text/css" href="ctf.css">
</head>
<body>
<h1>Harris Summer 2017 CTF</h1>
<table>
<tr>
<td>Name</td>
<td>Points</td>
<td>Flags Acquired</td>
</tr>
<tr>
<td>John Doe</td>
<td>2.5</td>
<td>#1, #6</td>
</tr>
<tr>
<td>Jane Doe</td>
<td>2</td>
<td>#2, #3</td>
</tr>
</table>
</body>
</html>
However the css, which is properly saved in the same directory as the html, is not getting linked to the html. I used style tags just to see if css won't show up in my browser but that worked. These are all locally stored.
EDIT: ctf.css contains the following code
* {
color: blue;
}
h1 {
font-family: 'Raleway', sans-serif;
color: red;
}
table, tr, td {
border: 1px black solid;
}
You should change
<link ref="stylesheet" type="text/css" href="ctf.css">
to
<link rel="stylesheet" type="text/css" href="ctf.css">
Here is html code for table i am having disorentation problem in resulting table. Kindly help.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
table, td, th {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 80%;
background-color:#A6F7EE;
}
th {
height: 50px;
}
</style>
</head>
<body>
<table align="center">
<tr>
<th>State</th>
<th>Condition</th>
<th>Slab Low</th>
<th>Slab High</th>
<th>Rate(in Rs)</th>
</tr>
<tr>
<td rowspan="4">Andhra Pradesh (As per tariff order dated 23rd March 2015.)</td>
<td colspan="3">Consumption less than 50 Units</td> <td align="center"> 1</td> <td align="center">50</td> <td align="center">1.45</td
></tr>
<tr>
<td colspan="3" rowspan="2">Consumption between 1 & 100 Units <td> 1</td> <td>50</td> <td> 1.45</td>
</tr><tr>
<td>51</td> <td>100</td> <td>2.6</td>
</tr>
</body>
</html>
Resulting table is disoriented what can be done to make table's row of equal size.
Not sure I completely understand the question, but there were some problems with the closing tags in your code and one of the td rowspans, maybe that was why it wasn't rendering correctly. Try the following:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
table, td, th {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 80%;
background-color:#A6F7EE;
}
th {
height: 50px;
}
</style>
</head>
<body>
<table align="center">
<tr>
<th>State</th>
<th>Condition</th>
<th>Slab Low</th>
<th>Slab High</th>
<th>Rate(in Rs)</th>
</tr>
<tr>
<td rowspan="3">Andhra Pradesh (As per tariff order dated 23rd March 2015.)</td>
<td colspan="3">Consumption less than 50 Units</td><td>1</td><td>50</td><td>1.45</td>
</tr>
<tr>
<td colspan="3" rowspan="2">Consumption between 1 & 100 Units</td>
<td>1</td>
<td>50</td>
<td>1.45</td>
</tr>
<tr>
<td>51</td>
<td>100</td>
<td>2.6</td>
</tr>
</body>
</html>
If fixing the closing and opening tags doesn't work, then (following your screenshot) the HTML markup should be something like this (just change the values);
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
table,
td,
th {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 80%;
background-color: #A6F7EE;
}
th {
height: 50px;
}
</style>
</head>
<body>
<table>
<tr>
<th>1a</th>
<th>1b</th>
<th>1c</th>
<th>1d</th>
<th>1e</th>
<th>1f</th>
</tr>
<tr>
<td rowspan="4">2a</td>
<td>2b</td>
<td>2c</td>
<td>2d</td>
<td>2e</td>
<td>2f</td>
</tr>
<tr>
<td rowspan="2">3a</td>
<td rowspan="2">3b</td>
<td>3c</td>
<td>3d</td>
<td>3e</td>
</tr>
<tr>
<td>4c</td>
<td>4d</td>
<td>4e</td>
</tr>
<tr>
<td>5b</td>
<td>5c</td>
<td>5d</td>
<td>5e</td>
<td>5f</td>
</tr>
</table>
</body>
</html>
Code :
<html>
<head>
<title>Hello World</title>
</head>
<body>
<table border=1>
<tr>
<td >Old</td>
<td>1</td>
</tr>
<tr>
<td>New</td>
<td>1</td>
</tr>
</table>
</body>
Is there any technique I can use to highlight the items that have changed ( in this case , 2nd row's 1st column) using CSS ? or do I have to resort to other things like JavaScript ?
Use classes like:
<html>
<head>
<style type="text/css">
.highlight{
background: fuchsia;
}
</style>
<title>Hello World</title>
</head>
<body>
<table border=1>
<tr class="highlight">
<td >Old</td>
<td>1</td>
</tr>
<tr>
<td>New</td>
<td>1</td>
</tr>
</table>
</body>
And if something changes you can add the class to the specific element:
$(element).addClass('highlight');
or with plain JavaScript:
element.class = 'highlight';
If you're asking how to highlight the second column of the second row specifically this will work:
table > tr:nth-child(2) > td:nth-child(2) {
background-color:#FFEEEE;
}
If you're asking how to highlight changed rows ANYWHERE, use a class.
Add this to the of your document or the stylesheet.
<style> .highlight { background-color:#FFEEEE; }
Add this to your TD's
class="highlight"
I'm currently learning HTML. I was trying to create a simple HTML document that displays a simple table, but I'm having troubles. My web browser (Mozilla Firefox) is not displaying the borders for the whole table. It looks like if it was a regular paragraph.
Here is what I have
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0//Strict//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11-strict.dtd">
<html>
<head>
<title>My first web page</title>
</head>
<body>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<tr/>
<tr>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
</table>
</body>
</html>
Try adding a border attribute to the <table> tag, like this:
<table border="1">
Edit: If you have seen tables with borders, but without the border attribute set, it's probably because they were styled with css, which is the preferred way to style everything in html (not by adding individual attributes as above):
<head>
<title>My first web page</title>
<style type="text/css">
table {border: 1px solid black;}
td {border: 1px solid black;}
</style>
</head>
<body>
<table>
<tr>
<td>1</td>
...
</body>
As another learning exercise, you should also look into linking to an external style sheet, as an alternative to using a <style> tag in the html as shown here. Here is a decent beginning tutorial: http://www.w3schools.com/css/css_howto.asp
You might want to control border by using something like :
<table style="border:2px solid red;">
You're missing a closing element for second row. Should be:
<head>
<title>My first web page</title>
</head>
<body>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<tr/>
<tr>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
</table>
</body>