i have an html file that looks like this
<!DOCTYPE html>
<html>
<head>
<title>Postgraduate students</title>
</head>
<body align = "center">
<h2>Postgraduate Students</h2>
<br></br>
<table align = "center" border = "5" width = "50%">
<thead colspan = "4">
<tr>
<th>NAME</th>
<th>Registration No.</th>
</tr>
</thead>
<tbody>
<tr>
<td>IDI Mohammed</td>
<td>SEP16/COMP/001X</td>
</tr>
<tr>
<td>LUBINGA Robert</td>
<td>SEP16/COMP/002U</td>
</tr>
</tbody>
</table>
</body>
How do i make the content in td start on the left border-line of the table ? Right now the table looks like this.
In order to make text-align in table you have to use tex-align css property
<body align="center">
<h2>Postgraduate Students</h2>
<table align="center" border="5" width="50%">
<thead colspan="4">
<tr>
<th>NAME</th>
<th>Registration No.</th>
</tr>
</thead>
<tbody>
<tr>
<td>IDI Mohammed</td>
<td>SEP16/COMP/001X</td>
</tr>
<tr>
<td>LUBINGA Robert</td>
<td>SEP16/COMP/002U</td>
</tr>
</tbody>
</table>
Check this link : Jsfiddle
tbody>tr>td {
text-align: left
}
take that 'align = "center"' out and replace that with the '"left"'
In order to align the text to the left of your td, you can use the CSS property text-align and set the value to "left".
http://www.w3schools.com/cssref/pr_text_text-align.asp
<head>
<title>Postgraduate students</title>
<style type="text/css">
td{text-align:left;}
</style>
</head>
You can try to modify your head content like this for a quick test but i recommand to use a css file.
Firstly, remove the align attribute as this is obsolete & deprecated and should no longer be used.
MDN
Note: Do not use this attribute as it is obsolete (not supported) in the latest standard.
To achieve the same effect as the left, center, right, or justify values, use the CSS text-align property on it.
All tbody text will then align left by default.
To center the table, just use margin:auto.
table {
margin: auto;
}
<table border="5" width="60%">
<thead colspan="4">
<tr>
<th>NAME</th>
<th>Registration No.</th>
</tr>
</thead>
<tbody>
<tr>
<td>IDI Mohammed</td>
<td>SEP16/COMP/001X</td>
</tr>
<tr>
<td>LUBINGA Robert</td>
<td>SEP16/COMP/002U</td>
</tr>
</tbody>
</table>
You have to add this to css style:
tbody>tr>td {
text-align: left
}
If i were you I would get rid of align: center.
Related
Trying to build a table with sort icon next to each column name. (Using bootstrap and font awesome)
Please, refer to the code below
HTML
<table class="table table-responsive">
<tr>
<th>Name</th>
<th>Surname</th>
<th>Name and Surname</th>
</tr>
</table>
CSS
th::after {
font-family: FontAwesome;
content: "\f0dc";
float: right;
text-align: right;
}
Why float and text-align not working here? Please let me know right CSS code to get it right. I also don't want that sort icon to wrapped up like normal text in smaller screens. It should be in fixed right place.
i think your mixing up the table tags
<table></table> table tag
<thead></thead> table header
<th></th> table column
<tbody></tbody> table body
<tr></tr> table row
<td></td> table cell
<tfoot></tfoot> table footer
but to answer your question with the way your current data is structured do it like this just add an empty table cell or column as the case maybe to your table row then use the css below to add what you want to the cell.
<!DOCTYPE html>
<html>
<head>
<title>extra table cell</title>
<style type="text/css">
tr th:last-child::after {
font-family: FontAwesome;
content: " i am what you want";
}
</style>
</head>
<body>
<table class="table table-responsive">
<tr>
<th>Name</th>
<th>Surname</th>
<th>Name and Surname</th>
<th></th>
</tr>
<tr>
<th>Name</th>
<th>Surname</th>
<th>Name and Surname</th>
<th></th>
</tr>
<tr>
<th>Name</th>
<th>Surname</th>
<th>Name and Surname</th>
<th></th>
</tr>
</table>
</body>
</html>
My id #kiwi doesn't seem to work. Could anyone explain me why it is not working? I've been searching for some help but couldn't find it. It doesn't even work when I try to class it too.
<head>
<title>this is the title sucker</title>
<style>
#kiwi {background-color:green;}
</style>
</head>
<body>
<table border="1">
<tr>
<th colspan="3">Statistics</th>
</tr>
<tr>
<th colspan="1">Car model name</th>
<th colspan="0">Vegetables</th>
<th>Delicious Fruits</th>
</tr>
<div id="kiwi">
<tr>
<td>Jaguar</td>
<td>Tomato</td>
<td>Kiwi</td>
</div>
</tr>
<tr>
<td>BMW</td>
<td>Potato</td>
<td>Apples</td>
</tr>
<tr>
<td>AUDI</td>
<td>Cabbage</td>
<td>Watermelon</td>
</tr>
</table>
</body>
you should assign the id to <tr> tag and not put it in a div
This works:
<head>
<title>this is the title sucker</title>
<style>
#kiwi {background-color:green;}
</style>
</head>
<body>
<table border="1">
<tr>
<th colspan="3">Statistics</th>
</tr>
<tr>
<th colspan="1">Car model name</th>
<th colspan="0">Vegetables</th>
<th>Delicious Fruits</th>
</tr>
<tr id="kiwi">
<td>Jaguar</td>
<td>Tomato</td>
<td>Kiwi</td>
</tr>
<tr>
<td>BMW</td>
<td>Potato</td>
<td>Apples</td>
</tr>
<tr>
<td>AUDI</td>
<td>Cabbage</td>
<td>Watermelon</td>
</tr>
</table>
</body>
In fact it does work. It is the matter of div content.
Instead of
<div id="kiwi">
<tr>
<td>Jaguar</td>
<td>Tomato</td>
<td>Kiwi</td>
</div>
</tr>
Try for example:
<tr>
<td>Jaguar</td>
<td>Tomato</td>
<td><div id="kiwi">Kiwi</div></td>
</tr>
Edit: As it turns out, you can use a div inside a tr as well. So you can either place it inside the td tag, as shown below. Or if you want to color the whole row, you can put id on 'tr' itself, as suggested by others here.
There are a few things there. First of all, you cannot put a<div> directly inside a <table> tag. You have to place it inside a <th> or <td> tag.
See more here : div inside table
Also, you <div> tag is opened before <tr>, but closed after it, which is not correct. Always open and close tags in correct order.
You can do something like this:
<tr>
<td>Jaguar</td>
<td>Tomato</td>
<td><div id="#kiwi">Kiwi</div></td>
</tr>
I am trying to fix the width no matter of what the content is. But, the width of the table is changing according to it's content. How can I fix it?
Here is my code:
<style>
table{width:25px; background:#66f;}
</style>
<table>
<tr>
<td>sn</td>
<td style="width:20px;">Name</td>
</tr>
<tr>
<td>1</td>
<td>Wolfeschlegelsteinhausenbergerdorff</td>
</tr>
</table>
Try this
<table>
<tbody><tr>
<td>sn</td>
<td style="width:20px;">Name</td>
</tr>
<tr>
<td>1</td>
<td style="word-break: break-all;">Wolfeschlegelsteinhausenbergerdorff</td>
</tr>
</tbody>
</table>
You need to use table-layout: fixed; and provide width to your table and td elements accordingly.
You should also use word-wrap: break-word; so that you don't get in trouble if you encounter a non-breaked string
Demo
you don't mentioned style class table with dot extension and it won't be called using class attribute.
Here is the code:
<style>
.table{
width:25px; background:#66f;
}
</style>
<table class="table">
<tr>
<td>sn</td>
<td style="width:20px;">Name</td>
</tr>
<tr>
<td>1</td>
<td>Wolfeschlegelsteinhausenbergerdorff</td>
</tr>
</table>
I have the following html code:
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td rowspan="2">Save a lot</td>
</tr>
<tr>
<td>March</td>
</tr>
</table>
Using CSS styling or another method, can I make the text "Save a lot" top, left justified?
td[rowspan] {
vertical-align: top;
text-align: left;
}
See: CSS attribute selectors.
<td rowspan="2" style="text-align:left;vertical-align:top;padding:0">Save a lot</td>
That should do it.
try this
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table style="width:50%;">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr style="height:100px">
<td valign="top">January</td>
<td valign="bottom">$100</td>
</tr>
</table>
<p><b>Note:</b> The valign attribute is not supported in HTML5. Use CSS instead.</p>
</body>
</html>
use valign="top" for td style
I'm having an object in a table and I'm unable to set vertical align (it doesn't seem to work).
Why is that?
Example:
http://jsfiddle.net/PHDWz/1/
When I give the td a height.. the content is vertical aligned in the middle....
<table cellspacing="0">
<thead>
<tr>
<th scope="col" style="width: 180px">Description</th>
<th scope="col">Textarea</th>
</tr>
</thead>
<tbody>
<tr>
<td height="400">Bla bla bla! Write something if you like! </td>
<td>
<textarea></textarea> <span><img src="http://www.qualtrics.com/university/wp-content/plugins/wp-print/images/printer_famfamfam.gif" alt="printer"> A printer!</span>
</td>
</tbody>
</table>
just add an additional column to avoid the "A printer!" link being forced to be kind of attached as align-bottom to the textarea. In your css you may omit the vertical-align for the span as you have this duplicated in the outer td.
<table cellspacing="0">
<thead>
<tr>
<th scope="col" style="width: 180px">Description</th>
<th scope="col" colspan="2">Textarea</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bla bla bla! Write something if you like! </td>
<td><textarea></textarea></td>
<td><span><img src="http://www.qualtrics.com/university/wp-content/plugins/wp-print/images/printer_famfamfam.gif" alt="printer"> A printer!</span>
</td>
</tbody>
The text in the left column sits in the middle vertically when I extend the textbox. This is using Safari, please elaborate if something else