I'm trying to create a table with 2 table data and 2 table headers. After researching about html codes, I realized the way to shift the word to the left is Text-Align="Left" as written below. Unfortunately, it didn't work. I'm not using any CSS but just plain html codes.
Here is my codes :
<table style="width: 100%;">
<tr>
<th style="width: 189px; height: 23px;">Full Name:</th>
<td style="width: 1910px; height: 23px;">
<asp:Label ID="lblFullName" runat="server" Text="" Text-Align="Left"></asp:Label>
</td>
<th style="width: 21px; height: 23px;">Contact:</th>
<td style="width: 684px; height: 23px">
<asp:Label ID="lblContact" runat="server" Text=""></asp:Label>
</td>
</tr>
</table>
<asp:Label /> will generate an <span> HTML tag, which is inline, and text-align to it is undefined, otherwise, set text-align of the td:
<td style="width: 1910px; height: 23px; text-align: center;">
<asp:Label ID="lblFullName" runat="server" Text=""></asp:Label>
</td>
Or make your <asp:Label /> as a block element:
<asp:Label ID="lblFullName" runat="server" Text=""
style="display: block; text-align: center;"
></asp:Label>
Try this...
<table style="width: 100%;">
<tr>
<td style="width: 189px; height: 23px;">Full Name:</td>
<td style="width: 1910px; height: 23px;">
<asp:Label ID="lblFullName" runat="server" Text="" Text-Align="Left"></asp:Label>
</td>
</tr>
<tr>
<td style="width: 21px; height: 23px;">Contact:</td>
<td style="width: 684px; height: 23px">
<asp:Label ID="lblContact" runat="server" Text=""></asp:Label>
</td>
</tr>
</table>
Related
So, I have this table in which I need to place the td that contains the profile info further to the right as following:
Example
this is my HTML:
<table>
<tr>
<td>
<asp:Label ID="****" runat="server" CssClass="FieldLabelRqrd" Text="Name"></asp:Label>
</td>
<td>
<asp:Label ID="***" runat="server" Text="ID=****"></asp:Label>
</td>
<td colspan="4">
<div id="cssProfile">
<asp:Label ID="lblProfile" runat="server" Text="Profile:" CssClass="lblProfile"></asp:Label>
<asp:HyperLink ID="hlGoProfile" runat="server" ForeColor="blue" Target="_blank" CssClass="hlGoProfile" Text="Go"></asp:HyperLink>
</div>
</td>
</tr>
</table>
I tried colspan and rowspan but this does no work and here's the CSS
#cssProfile{
display:flex;
justify-content: start-flex;}
.lblProfile{
margin-left: auto;}
.hlGoProfile{
margin-left: auto;}
Give your table 100% width and add text-align: right to the cell in question.
BTW, you could remove that colspan, if you don't need it for any other purpose.
table {
width: 100%;
}
#cssProfile {
border: 1px solid red;
text-align: right;
}
<table>
<tr>
<td>
<asp:Label ID="****" runat="server" CssClass="FieldLabelRqrd" Text="Name">A</asp:Label>
</td>
<td>
<asp:Label ID="***" runat="server" Text="ID=****">B</asp:Label>
</td>
<td colspan="4">
<div id="cssProfile">
<asp:Label ID="lblProfile" runat="server" Text="Profile:" CssClass="lblProfile">C</asp:Label>
<asp:HyperLink ID="hlGoProfile" runat="server" ForeColor="blue" Target="_blank" CssClass="hlGoProfile" Text="Go">D</asp:HyperLink>
</div>
</td>
</tr>
</table>
I have a table in which there are many tr and td's
Currently it looks like this in the below image.
The area in the arrow needs to be reduced a bit. I tried adding padding but it didn't worked.
Below is the html
<table width="100%" border="0" cellspacing="0" cellpadding="5" style="background-color: #EAEFF5">
<tr>
<td class="label">
Project :
</td>
<td class="field" style="width: 10%;">
<asp:DropDownList ID="ddlProject" runat="server" Width="80%" AutoPostBack="false">
<asp:ListItem Value="0">--Select--</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td class="label">
Taluka :
</td>
<td class="field">
<%--<asp:TextBox ID="txtTaluka" runat="server" Width="80%"></asp:TextBox>--%>
<asp:DropDownList ID="ddlTaluka" runat="server" Width="80%">
<%--<asp:ListItem Value="0">--Select--</asp:ListItem>--%>
</asp:DropDownList>
</td>
</tr>
<tr>
<td class="label">
Transaction Type:
</td>
<td class="field" style="width: 30%;">
<asp:DropDownList ID="ddlTranType" runat="server" Width="50%" AutoPostBack="true"
OnSelectedIndexChanged="ddlTranType_SelectedIndexChanged">
<asp:ListItem Value="0">--Select--</asp:ListItem>
<asp:ListItem Value="AGR">Agreement Type</asp:ListItem>
<asp:ListItem Value="EXP">Expense Type</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td class="label">
7/12 :
</td>
<td class="field" style="width: 30%;">
<%--<obout:ComboBox ID="ComboBox1" runat="server" Width="180px" Height="150px" AutoClose="false"
AllowCustomText="true" AutoValidate="true" AllowEdit="false" SelectionMode="Multiple"
DataTextField="COLUMN7_12" DataValueField="COLUMN7_12" OpenOnFocus="true" EmptyText="Select 7/12 ..."
EnableVirtualScrolling="true" EnableLoadOnDemand="true" OnLoadingItems="ComboBox1_LoadingItems"
Visible="true">
<ClientSideEvents OnItemClick="ComboBox1_Click" />
<ItemTemplate>
<input type="checkbox" runat="server" id="chk712" />
<%# Container.Text %>
</ItemTemplate>
<FooterTemplate>
Displaying items
<%# Container.ItemsCount > 0 ? "1" : "0" %>-<%# Container.ItemsLoadedCount %>out
of
<%# Container.ItemsCount %>.
</FooterTemplate>
</obout:ComboBox>--%>
<asp:TextBox ID="txt712" runat="server" Width="60%"></asp:TextBox>
<br />
<i>Start typing...</i>
</td>
</tr>
<tr>
<td class="label">
Ref No :
</td>
<td class="field" style="width: 30%;">
<input type="text" id="txtrefno" runat="server" style="width: 60%" />
<img src="~/Images/search.gif" alt="Help" onclick="Search_Click()" style="cursor: pointer"
id="ImgSearch" runat="server" /><br />
<span style="color: #1B1E24;">(Auto Generated field)</span>
</td>
<td class="label">
Status :
</td>
<td class="field" style="width: 30%;">
<asp:DropDownList ID="ddlStatus" runat="server" Width="50%" AutoPostBack="false">
<asp:ListItem Value="0">--Select--</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td class="label">
Ref Date :
</td>
<td class="field" style="width: 30%;">
<input type="text" id="txtRefdate" runat="server" style="width: 60%" disabled="disabled" />
<%--<cc3:Calendar ID="CalDt1" runat="server" DatePickerMode="true" DatePickerImagePath="../Images/icon2.gif"
TextBoxId="txtRefdate" Enabled="true" CultureName="en-GB" DateFormat="dd/MM/yyyy">
</cc3:Calendar>--%>
</td>
<td class="label">
Transaction Date :
</td>
<td class="field" style="width: 30%;">
<input type="text" id="txtdate" runat="server" style="width: 50%" readonly="readonly" />
<cc3:Calendar ID="Calc2" runat="server" DatePickerMode="true" DatePickerImagePath="../Images/icon2.gif"
TextBoxId="txtdate" Enabled="true" CultureName="en-GB" DateFormat="dd/MM/yyyy">
</cc3:Calendar>
</td>
</tr>
<tr>
<td class="label">
Remarks :
</td>
<td>
<asp:TextBox ID="txtRemarks" runat="server" Width="80%" TextMode="MultiLine"></asp:TextBox>
</td>
</tr>
</table>
CSS
.label
{
width: 20%;
height: 10%;
}
.field
{
width: 30%;
height: 10%;
}
Fiddle of the html
I'd say you should remove the cellpadding property from the table and do that via css as well.
increased or decreased the padding to adjust the space between two td's
.field, .label {
padding: 2px;
}
I modified your jsfiddle https://jsfiddle.net/g0oyxfqs/2/
table tr:first-child td {
padding-bottom: 1px; // insert total padding length here
}
table tr:nth-child(2) td {
padding-top: 0;
}
In the Calendar Widget for the fourth row there is large text so its not fitting in single line so its size is increasing & View All button is also overlapping the edge of the widget. the number of row is fixed that means it can show maximum 5 rows at a time but the content of each row may have larger text. so when its not fitting in single line its giving me the trouble. i have tried few css trick but did not work. i need help to fix the size of its content so the designs works well.I am dot net developer but not a designer so not so much expert with css design. Please help me .
This is my aspx Code.
<table style="border: 0px; width: 500px;">
<tr>
<td style="width: 55px;"><img alt="" src="/Images/DeptIcons/Administration.png" /></td>
<td class="deptHeader">Calendar Editor</td>
</tr>
</table>
<hr style="border-top: 1px solid #79767b; margin-bottom: 20px;" />
<div style="position: relative;"><img alt="" src="/Images/ctnrTop.png" /></div>
<div style="background-image: url('/Images/ctnrBG.gif'); position: relative; margin-top: -5px; padding: 15px 0px 0px 15px;" class="cntrFont">
<table width="927" cellpadding="0" cellspacing="0">
<tr>
<td></td>
</tr>
<tr>
<td>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnRebind" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:Button UseSubmitBehavior="false" ID="btnRebind" runat="server" Style="display: none; width: 0px; height: 0px;
border: none; font-size: 0px; line-height: 0px;" OnClick="btnRebind_Click" />
<table cellpadding="4" cellspacing="0">
<tr>
<td colspan="4" align="right"><input type="button" onclick="addResult()" value="Add Calendar Event" class="fancyButton" /></td>
</tr>
<tr>
<td style="width: 30px; text-align: center;"></td>
<td style="width: 180px;"><b>Event Name</b></td>
<td style="width: 160px;"><b>Event Date</b></td>
<td></td>
</tr>
<asp:Repeater ID="rptEvents" runat="server">
<ItemTemplate>
<tr>
<td style="width: 30px; text-align: center;"><img src="../Images/icoStar.png" style="width: 15px; height: 15px; margin-top: 4px;" alt="Event" /></td>
<td><a class="calendarName" href="javascript:void(0);" onclick='showSearchResult(<%#Eval("CalID")%>,1);'><%# DataBinder.Eval(Container.DataItem, "calEvent")%></a></td>
<td><%# Convert.ToDateTime(Eval("calEventDate").ToString()).ToString("MMMM dd yyyy") %></td>
<td></td>
</tr>
</ItemTemplate>
</asp:Repeater>
</table>
</td>
</tr>
</table>
</div>
<table style="border: 0px; width: 500px;">
<tr>
<td style="width: 55px;"><img alt="" src="/Images/DeptIcons/Administration.png" /></td>
<td class="deptHeader">Calendar Editor</td>
</tr>
</table>
<hr style="border-top: 1px solid #79767b; margin-bottom: 20px;" />
<div style="position: relative;"><img alt="" src="/Images/ctnrTop.png" /></div>
<div style="background-image: url('/Images/ctnrBG.gif'); position: relative; margin-top: -5px; padding: 15px 0px 0px 15px;" class="cntrFont">
<table width="927" cellpadding="0" cellspacing="0">
<tr>
<td></td>
</tr>
<tr>
<td>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnRebind" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:Button UseSubmitBehavior="false" ID="btnRebind" runat="server" Style="display: none; width: 0px; height: 0px;
border: none; font-size: 0px; line-height: 0px;" OnClick="btnRebind_Click" />
<table cellpadding="4" cellspacing="0">
<tr>
<td colspan="4" align="right"><input type="button" onclick="addResult()" value="Add Calendar Event" class="fancyButton" /></td>
</tr>
<tr>
<td style="width: 30px; text-align: center;"></td>
<td style="width: 180px;"><b>Event Name</b></td>
<td style="width: 160px;"><b>Event Date</b></td>
<td></td>
</tr>
<asp:Repeater ID="rptEvents" runat="server">
<ItemTemplate>
<tr>
<td style="width: 30px; text-align: center;"><img src="../Images/icoStar.png" style="width: 15px; height: 15px; margin-top: 4px;" alt="Event" /></td>
<td> <div title="<%# DataBinder.Eval(Container.DataItem, "calEvent")%>" style="width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis"><a class="calendarName" href="javascript:void(0);" onclick='showSearchResult(<%#Eval("CalID")%>,1);'><%# DataBinder.Eval(Container.DataItem, "calEvent")%></a></div></td>
<td><%# Convert.ToDateTime(Eval("calEventDate").ToString()).ToString("MMMM dd yyyy") %></td>
<td></td>
</tr>
</ItemTemplate>
</asp:Repeater>
</table>
</td>
</tr>
</table>
</div>
You may want to take a look at combining the text-overflow: ellipsis css rule with overflow: hidden. For this to work, the cell must also have a fixed width, and the whitespace: nowrap tells it not to wrap long text. This will show there's more text, and you can set the cell title to the full text content so a mouseover will hint the name of the entry. Please use external css files. I just put this inline as an example.
<asp:Repeater ID="rptEvents" runat="server">
<ItemTemplate>
<tr>
<td style="width: 30px; text-align: center;"><img src="../Images/icoStar.png" style="width: 15px; height: 15px; margin-top: 4px;" alt="Event" /></td>
<td title="<%# DataBinder.Eval(Container.DataItem, "calEvent")%>" style="width: 300px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis"><a class="calendarName" href="javascript:void(0);" onclick='showSearchResult(<%#Eval("CalID")%>,1);'><%# DataBinder.Eval(Container.DataItem, "calEvent")%></a></td>
<td><%# Convert.ToDateTime(Eval("calEventDate").ToString()).ToString("MMMM dd yyyy") %></td>
<td></td>
</tr>
</ItemTemplate>
</asp:Repeater>
EDIT: Sorry, My mistake... those css rules won't apply to a <td>. You may want to start considering dropping tables entirely in favour of <div>s, or insert a <div> into the cell, like below:
table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
}
td {
padding: 5px;
border: 1px solid;
margin: 0;
}
td:first-of-type {
width: 30px;
}
.event-name {
max-width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
</head>
<body>
<table>
<tr>
<td><i class="fa fa-star"></i></td>
<td><div title="This is a very loooooooong text! There can be nothing longer than it" class="event-name">This is a very loooooooong text! There can be nothing longer than it</div></td>
<td>Friday, August 19, 2016</td>
<td></td>
</tr>
</table>
</body>
</html>
I'm trying to do a nested-table I'm about to be finish on my first table
when this happen:
here Is my HTML markup:
<table class="quotationTable1">
<%--Primary table--%>
<tr>
<td>
<table>
<%--Second Table--%>
<tr>
<td style="width: 397px">
<table style="border-style: solid; border-color: inherit; border-width: medium; width: 452px;">
<%--Third Table--%>
<tr>
<th colspan="2" style="padding-top: 5px; background-color: black; color: white;">Job Quotation</th>
</tr>
<tr>
<td colspan="2" style="height: 26px;">
<asp:Label ID="lblDescCategory" runat="server" Text="Category:"></asp:Label>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td colspan="2">
<asp:Label ID="labelDescType" runat="server" Text="Type:"></asp:Label>
<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td style="width: 265px">
<asp:Label ID="lblDescAddress" runat="server" Text="Address:"></asp:Label>
<asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td style="width: 202px">
<asp:Label ID="lblDescContacts" runat="server" Text="Contacts:"></asp:Label>
<asp:Label ID="Label4" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td colspan="2" style="height: 3px">
<asp:Label ID="lblDescJobdesc" runat="server" Text="Job Description:"></asp:Label>
</td>
</tr>
<tr>
<td colspan="2" style="height: 59px">
<asp:Label ID="Label6" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td colspan="2">
<asp:Label ID="Label5" runat="server" Text="File: "></asp:Label>
<asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton>
</td>
</tr>
<tr>
<td colspan="2">
<asp:Label ID="Label7" runat="server" Text="Finishing:"></asp:Label></td>
</tr>
</table>
</td>
<td>
<table style="width: 373px; position:relative;"><%--fourth table--%>
<tr>
<th colspan="3" style="padding-bottom:5px; background-color: black; color: white; width: 400px;">Specification</th>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
How can I make my second table Specification remove all those spaces and
be on the same position as Job Quotation?
you need to add vertical-align:top to td
and don't use inline styles, use classes instead
td {
vertical-align: top
}
.w400 {
padding-bottom: 5px;
background-color: black;
color: white;
width: 400px
}
.w397 {
width: 397px
}
.w397 table {
border-style: solid;
border-color: inherit;
border-width: medium;
width: 452px
}
.w397.title {
padding-top: 5px;
background-color: black;
color: white;
}
.w373.relative {
width: 373px;
position: relative
}
.h59 {
height: 59px
}
.h26 {
height: 26px
}
.h3 {
height: 3px
}
<table class="quotationTable1">
<tr>
<td>
<table>
<tr>
<td class="w397">
<table class="w397 table">
<tr>
<th colspan="2" class="w397 title">Job Quotation</th>
</tr>
<tr>
<td colspan="2" class="w397 h26">
<asp:Label ID="lblDescCategory" runat="server" Text="Category:"></asp:Label>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td colspan="2">
<asp:Label ID="labelDescType" runat="server" Text="Type:"></asp:Label>
<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td class="w265">
<asp:Label ID="lblDescAddress" runat="server" Text="Address:"></asp:Label>
<asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td class="w202">
<asp:Label ID="lblDescContacts" runat="server" Text="Contacts:"></asp:Label>
<asp:Label ID="Label4" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td colspan="2" class="h3">
<asp:Label ID="lblDescJobdesc" runat="server" Text="Job Description:"></asp:Label>
</td>
</tr>
<tr>
<td colspan="2" class="h59">
<asp:Label ID="Label6" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td colspan="2">
<asp:Label ID="Label5" runat="server" Text="File: "></asp:Label>
<asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton>
</td>
</tr>
<tr>
<td colspan="2">
<asp:Label ID="Label7" runat="server" Text="Finishing:"></asp:Label>
</td>
</tr>
</table>
</td>
<td>
<table class="w373 relative">
<tr>
<th colspan="3" class="w400">Specification</th>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
You need to nest the table in a TR and TD within the parent table:
<table class="quotationTable1">
<%--Primary table--%>
<tr>
<td>
<table>
<%--Second Table--%>
<tr>
<td style="width: 397px">
<table style="border-style: solid; border-color: inherit; border-width: medium; width: 452px;">
<%--Third Table--%>
<tr>
<th colspan="2" style="padding-top: 5px; background-color: black; color: white;">Job Quotation</th>
</tr>
<tr>
<td colspan="2" style="height: 26px;">
<asp:Label ID="lblDescCategory" runat="server" Text="Category:"></asp:Label>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td colspan="2">
<asp:Label ID="labelDescType" runat="server" Text="Type:"></asp:Label>
<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td style="width: 265px">
<asp:Label ID="lblDescAddress" runat="server" Text="Address:"></asp:Label>
<asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td style="width: 202px">
<asp:Label ID="lblDescContacts" runat="server" Text="Contacts:"></asp:Label>
<asp:Label ID="Label4" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td colspan="2" style="height: 3px">
<asp:Label ID="lblDescJobdesc" runat="server" Text="Job Description:"></asp:Label>
</td>
</tr>
<tr>
<td colspan="2">
<table style="width: 373px; position:relative;"><%--fourth table--%>
<tr>
<th colspan="3" style="padding-bottom:5px; background-color: black; color: white; width: 400px;">Specification</th>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2" style="height: 59px">
<asp:Label ID="Label6" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td colspan="2">
<asp:Label ID="Label5" runat="server" Text="File: "></asp:Label>
<asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton>
</td>
</tr>
<tr>
<td colspan="2">
<asp:Label ID="Label7" runat="server" Text="Finishing:"></asp:Label></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
I have a HTML table whose data is coming from the database. Currently the data is getting filled from the center instead of top. Like below:-
Have a look at the below HTML
<table style="width: 100%; height: 550px; text-align: center" border="1" runat="server"
id="tbl1Details">
<colgroup>
<col width="5%" />
<col width="45%" />
</colgroup>
<tr>
<td colspan="4">
<asp:Label ID="lblpltfrm_Number" runat="server" Style="height: 20px;"></asp:Label>
</td>
</tr>
<tr>
<td align="center" style="height: 20px;">
SR.
</td>
<td align="center" style="height: 20px;">
Stop
</td>
<td align="center" style="height: 20px;">
Time
</td>
<td align="center" style="height: 20px;">
Status
</td>
</tr>
<tr>
<td id="tTime" runat="server">
<div id="list" runat="server" style="font-size: 25px;">
</div>
</td>
<td>
<table style="width: 100%">
<colgroup>
<col width="50%" />
<col width="50%" />
</colgroup>
<tr>
<td style="text-align: left">
<div id="dv_FromStop" style="font-size: 25px;" runat="server">
</div>
</td>
<td style="text-align: left">
<div id="Dv_ToStop" style="font-size: 25px;" runat="server">
</div>
</td>
</tr>
</table>
</td>
<td>
<div id="dv_Time" style="font-size: 25px;" runat="server">
</div>
</td>
<td>
<div id="dv_status" style="font-size: 25px;" runat="server">
</div>
</td>
</tr>
</table>
Use the following CSS:
table td {
vertical-align: top;
}
Or in HTML, use either:
<td valign="top">
<td style="vertical-align: top;">
The second one is preferred because, valign is deprecated.
You need to use vertical alignment.
css:
td { vertical-align:top; }
Use vertical-align: https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align.
In CSS:
td { vertical-align: top; }
In HTML:
<td valign="top">...</td>